/* ==========================================================================
   DIABETCENTRO — SERVICE DETAIL pages (shared module, enqueued via is_page()
   for the 8 detail docs; see functions.php). Same override convention as
   style.css: Elementor's own selector + `body` prefix. House keyframes/tokens
   live in style.css §1/§5. Supersedes the old narrow servicios.css (the
   hero benefit-list pass — folded in here + widened to all 8 pages).

   THE SHARED SKELETON (verified 2026-07-12 from _elementor_data): every
   detail page is three classic sections in the same order —
     A HERO   : section w/ bg image + one Qi animated-text title (centered).
     B INTRO  : 2 cols — col1 hook (Qi animated-text) + button pair;
                col2 text-editor (leads w/ a heading) + benefit icon-list(s).
     C CONTENT: col1 eyebrow (heading) + Qi animated-text H2 + text-editor;
                col2 Qi image-gallery.
   Data-ids differ per page (like the equipo members) → we key off the three
   SECTION-id lists below + widget classes inside them. 8766 is the structural
   odd-one-out (empty hero title, no hook, no gallery) → §5.

   ROLE → SECTION-ID MAP
     pid   HERO        INTRO      CONTENT     closing e-buttons
     8859  2d9cef88    21a75542   9e7b91a     —
     9024  5625ef0     b241e0c    7f03a682    —
     8746  50792e1f    5c9b6e31   60666e80    dcb74601
     8766  29aeab40    1f250b57   6c44cf93    8549dc5 (e-div)
     8787  33cf2cc8    218a9106   75177e41    —
     8805  41dc9f4     4495464e   386e3e70    —
     8815  59561f4d    3965ef4f   45be0f1d    —
     9065  379292d5    36e3a76b   398a0627    dcb90601

   CONTENT NOTE (punch list): 6/8 heroes carry dent-room.jpg — a DENTAL room,
   wrong subject. We paint the hero spruce here so the photo never shows;
   assign correct per-service hero photography in the media library, then this
   module can switch to photo-under-scrim. 8766 (Salud Visual) is the FIRST to
   graduate — §5 gives it a real photo-under-scrim hero (DRS-2, the retina-
   camera exam) since correct on-theme photography already existed on the page;
   the remaining 5 spruce heroes still await their photos.
   ========================================================================== */

/* ==========================================================================
   §0 Qi ANIMATED-TEXT NORMALIZATION
   Every cluster title is a Qi animated-text: each word is a .qodef-e-word with
   its own `appear-from-bottom` transform/opacity that (a) isn't reduced-motion
   gated and (b) catches mid-flight in captures, reading as mismatched word
   colours/sizes. Neutralise it cluster-wide → words render static and inherit
   the section's colour/size; the §4 house entrances carry the motion, gated.
   ========================================================================== */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .qodef-m-title .qodef-e-word {
	opacity: 1;
	transform: none;
	color: inherit;
	font: inherit;
}

/* ==========================================================================
   §1 HERO — the branded spruce masthead
   The generic photo band → the homepage/hub spruce panel: boxed radius-24
   ground, mint radial glow for depth, left-aligned white title, a SERVICIOS
   eyebrow (real ::before text, screen-reader announced — punch-list a real
   h6). We kill the section bg image (mirror the kit's :not(motion) selector
   so `body` wins by one type) so the wrong dental photo never paints.
   ========================================================================== */

/* the spruce ground (beats the kit's classic bg-image rule) */
body :is(
	.elementor-8859 .elementor-element.elementor-element-2d9cef88,
	.elementor-9024 .elementor-element.elementor-element-5625ef0,
	.elementor-8746 .elementor-element.elementor-element-50792e1f,
	.elementor-8766 .elementor-element.elementor-element-29aeab40,
	.elementor-8787 .elementor-element.elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element.elementor-element-41dc9f4,
	.elementor-8815 .elementor-element.elementor-element-59561f4d,
	.elementor-9065 .elementor-element.elementor-element-379292d5
	):not(.elementor-motion-effects-element-type-background) {
	position: relative;
	overflow: hidden;
	background-image: none;
	background-color: var(--e-global-color-accent);
	max-width: min(1200px, calc(100% - 32px));
	margin: 16px auto 0;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
	padding-block: clamp(52px, 6vw, 92px);
}
/* the kit paints a dark background-overlay div over the photo — hide it so it
   doesn't double-darken the spruce ground */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8766 .elementor-element-29aeab40,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) > .elementor-background-overlay {
	display: none;
}
/* depth: a mint glow top-right + a soft deep-spruce vignette bottom-left */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8766 .elementor-element-29aeab40,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 120% at 92% 8%, rgba(191, 227, 223, 0.16), transparent 52%),
		radial-gradient(80% 120% at 2% 100%, var(--dc-color-spruce-deep, #004A48), transparent 60%);
}
/* keep content above the glow */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8766 .elementor-element-29aeab40,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) > .elementor-container {
	position: relative;
	z-index: 1;
}

/* the title: white display type, left-aligned editorial (kill Qi centering) */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) .elementor-widget-qi_addons_for_elementor_animated_text {
	text-align: left;
}
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) .qodef-m-title,
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) .qodef-m-title * {
	color: #ffffff;
	text-align: left;
	justify-content: flex-start;
	font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 700;
}
/* Qi mirrors a center-alignment class on the title wrap — neutralise it */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) .qodef-m-title.qodef--alignment-center {
	text-align: left;
}

/* the eyebrow: SERVICIOS above the title (real ::before text) */
body :is(
	.elementor-8859 .elementor-element-2d9cef88,
	.elementor-9024 .elementor-element-5625ef0,
	.elementor-8746 .elementor-element-50792e1f,
	.elementor-8787 .elementor-element-33cf2cc8,
	.elementor-8805 .elementor-element-41dc9f4,
	.elementor-8815 .elementor-element-59561f4d,
	.elementor-9065 .elementor-element-379292d5) .elementor-widget-qi_addons_for_elementor_animated_text::before {
	content: "SERVICIOS";
	display: block;
	margin-bottom: 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
}

/* ==========================================================================
   §2 INTRO — hook headline + house button pair + benefit chips + subhead
   ========================================================================== */

/* the hook (the one Qi animated-text in the intro) → display headline, dark */
body :is(
	.elementor-8859 .elementor-element-21a75542,
	.elementor-9024 .elementor-element-b241e0c,
	.elementor-8746 .elementor-element-5c9b6e31,
	.elementor-8787 .elementor-element-218a9106,
	.elementor-8805 .elementor-element-4495464e,
	.elementor-8815 .elementor-element-3965ef4f,
	.elementor-9065 .elementor-element-36e3a76b) .qodef-m-title,
body :is(
	.elementor-8859 .elementor-element-21a75542,
	.elementor-9024 .elementor-element-b241e0c,
	.elementor-8746 .elementor-element-5c9b6e31,
	.elementor-8787 .elementor-element-218a9106,
	.elementor-8805 .elementor-element-4495464e,
	.elementor-8815 .elementor-element-3965ef4f,
	.elementor-9065 .elementor-element-36e3a76b) .qodef-m-title * {
	color: var(--e-global-color-accent);
	text-align: left;
	font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 700;
}

/* col2 text-editor leads with a bold heading line → subhead voice (teal). The
   text-editor's first heading is the section's SECOND title, so it demotes. */
body :is(
	.elementor-8859 .elementor-element-21a75542,
	.elementor-9024 .elementor-element-b241e0c,
	.elementor-8746 .elementor-element-5c9b6e31,
	.elementor-8766 .elementor-element-1f250b57,
	.elementor-8787 .elementor-element-218a9106,
	.elementor-8805 .elementor-element-4495464e,
	.elementor-8815 .elementor-element-3965ef4f,
	.elementor-9065 .elementor-element-36e3a76b) .elementor-widget-text-editor :is(h1, h2, h3, h4) {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.32;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--dc-color-teal-text);
	margin: 0 0 12px;
}

/* text-editor body + brand bullets everywhere in the cluster */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-text-editor {
	color: var(--e-global-color-text, #333F46);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-text-editor ul {
	list-style: none;
	margin: 14px 0;
	padding: 0;
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-text-editor ul li {
	position: relative;
	padding-left: 26px;
	margin-block: 7px;
	line-height: 1.55;
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-text-editor ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	box-shadow: 0 0 0 3px rgba(191, 227, 223, 0.35);
}

/* -- benefit icon-lists → mint chip rows (the homepage info-strip grammar;
   widened here from the old servicios.css 3-page pass to all 8). icon-lists
   only appear as benefit lists in the cluster, so page-scope is safe. ------- */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	padding: 13px 2px;
	margin: 0;
	border-block-start: 1px solid var(--e-global-color-d59e8a8);
}
/* first row of the first icon-list in a column opens without a hairline */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list:first-of-type .elementor-icon-list-items > .elementor-icon-list-item:first-child {
	border-block-start: 0;
}
/* fuse a second icon-list widget flush under the first (authored ~100.7%
   widths + 20px indents made its rows read detached — cap per SKILL §5) */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list + .elementor-widget-icon-list {
	margin: 0;
	--container-widget-width: 100%;
	width: 100%;
	max-width: 100%;
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list + .elementor-widget-icon-list :is(.elementor-icon-list-items, .elementor-icon-list-item) {
	padding-left: 0;
	margin-left: 0;
}
/* the chip: 42px mint circle, glyph teal, blooms teal on row hover */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	/* Elementor's per-widget CSS sets padding-inline-end:12px at (0,4,0)
	   (`.elementor-<pid> .elementor-element.elementor-element-<id>
	   .elementor-icon-list-icon`) → glyph rendered 12px left of centre. The
	   extra `.elementor-icon-list-item` here lifts this rule to (0,4,1) to win. */
	padding-inline: 0;
	margin: 0;
	background-color: var(--e-global-color-primary);
	border-radius: 50%;
	transition: background-color var(--dc-speed) var(--dc-ease);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon :is(svg, i) {
	/* beats Elementor's per-widget `… .elementor-icon-list-icon i {color:primary}`
	   at (0,4,1) — without the item class the glyph stayed mint-on-mint (invisible). */
	width: 15px;
	height: 15px;
	color: var(--dc-color-teal-text);
	fill: var(--dc-color-teal-text);
	transition: color var(--dc-speed) var(--dc-ease), fill var(--dc-speed) var(--dc-ease);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--e-global-color-text, #333F46);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon {
	background-color: var(--e-global-color-secondary);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon :is(svg, i) {
	color: #ffffff;
	fill: #ffffff;
}

/* -- hero/intro button pair: primary teal (kit already), secondary → ghost.
   Widened to all 8 (corazon's 2nd button was a black Facebook button; sueno's
   was WhatsApp-green — the ghost voice unifies them). ----------------------- */
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-button + .elementor-widget-button .elementor-button {
	background-color: transparent;
	border: 1.5px solid var(--e-global-color-secondary);
	color: var(--dc-color-teal-text);
	box-shadow: none;
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-button + .elementor-widget-button .elementor-button :is(svg, i) {
	color: var(--dc-color-teal-text);
	fill: var(--dc-color-teal-text);
}
body :is(
	.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
	.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
	) .elementor-widget-button + .elementor-widget-button .elementor-button:is(:hover, :focus) {
	background-color: rgba(191, 227, 223, 0.35);
	border-color: var(--e-global-color-accent);
	color: var(--e-global-color-accent);
}

/* ==========================================================================
   §3 CONTENT — eyebrow + display H2 + gallery media-cards, on a mint band
   ========================================================================== */

/* the whole content section rides a mint-cast band (homepage rhythm) */
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8766 .elementor-element-6c44cf93,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) {
	background-color: var(--e-global-color-cff305b);
	padding-block: clamp(48px, 5.5vw, 84px);
}

/* the section-opening heading widget → eyebrow (h6) voice */
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8766 .elementor-element-6c44cf93,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .elementor-widget-heading .elementor-heading-title {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
	margin-bottom: 6px;
}

/* the content H2 (Qi animated-text) → display headline, dark, left */
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-m-title,
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-m-title * {
	color: var(--e-global-color-accent);
	text-align: left;
	font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 700;
	margin-bottom: 8px;
}

/* -- the Qi image-gallery → media cards: radius, soft shadow, hover scale.
   Qi renders each item as .qodef-e-media-image wrapping the <img>. --------- */
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-image-gallery .qodef-grid-item,
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-e-media-image {
	border-radius: var(--dc-radius-card);
	overflow: hidden;
	box-shadow: var(--dc-shadow-soft);
	transition: transform var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease);
}
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-e-media-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--dc-ease);
}
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-e-media-image:hover {
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-lift);
}
body :is(
	.elementor-8859 .elementor-element-9e7b91a,
	.elementor-9024 .elementor-element-7f03a682,
	.elementor-8746 .elementor-element-60666e80,
	.elementor-8787 .elementor-element-75177e41,
	.elementor-8805 .elementor-element-386e3e70,
	.elementor-8815 .elementor-element-45be0f1d,
	.elementor-9065 .elementor-element-398a0627) .qodef-e-media-image:hover img {
	transform: scale(1.04);
}

/* nutricion (9024) 2×2 gallery → house media cards + uniform 3:2 tiles.
   This Qi build renders .qodef-grid-item > .qodef-e-inner > a.qodef-popup-item
   > img — NOT the .qodef-e-media-image the shared §3 rules above assume, so
   that treatment is dormant here. Re-apply it on the real markup, scoped to
   9024, and pin every cell to ONE 3:2 rectangle so the grid reads as equal
   tiles regardless of each photo's native crop (the three swapped photos are
   3:2; the kept elderly-couple shot is 1.528 → ~2% cover crop, faces centred).
   Sibling detail-page galleries are untouched (own punch-list item).
   (2026-07-14 photo refresh — tools/nutricion-gallery) */
body .elementor-9024 .elementor-element-79b204b .qodef-e-inner {
	aspect-ratio: 3 / 2;
	border-radius: var(--dc-radius-card);
	overflow: hidden;
	box-shadow: var(--dc-shadow-soft);
	transition: transform var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-9024 .elementor-element-79b204b .qodef-e-inner > a,
body .elementor-9024 .elementor-element-79b204b .qodef-e-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body .elementor-9024 .elementor-element-79b204b .qodef-e-inner img {
	transition: transform 420ms var(--dc-ease);
}
body .elementor-9024 .elementor-element-79b204b .qodef-grid-item:hover .qodef-e-inner {
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-lift);
}
body .elementor-9024 .elementor-element-79b204b .qodef-grid-item:hover .qodef-e-inner img {
	transform: scale(1.04);
}
@media (max-width: 767px) {
	/* the gallery stacks to one column on phones — restore a gap (the widget's
	   space_mobile is 0) so the four cards read as distinct rounded tiles, not a
	   seam-to-seam strip. !important beats Qi's generated grid-gap:0. (2026-07-14) */
	body .elementor-9024 .elementor-element-79b204b .qodef-grid-inner {
		gap: 14px !important;
	}
}

/* ==========================================================================
   §4 DEPTH — house entrances (scroll-driven, reduced-motion + support gated)
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* hero title arrives with a blur-focus (first viewport = time-based) */
		body :is(
			.elementor-8859 .elementor-element-2d9cef88,
			.elementor-9024 .elementor-element-5625ef0,
			.elementor-8746 .elementor-element-50792e1f,
			.elementor-8787 .elementor-element-33cf2cc8,
			.elementor-8805 .elementor-element-41dc9f4,
			.elementor-8815 .elementor-element-59561f4d,
			.elementor-9065 .elementor-element-379292d5) .qodef-m-title {
			animation: dc-focus-in 720ms var(--dc-ease) both;
		}
		/* intro hook + buttons + chips rise in on scroll */
		body :is(
			.elementor-8859 .elementor-element-21a75542,
			.elementor-9024 .elementor-element-b241e0c,
			.elementor-8746 .elementor-element-5c9b6e31,
			.elementor-8787 .elementor-element-218a9106,
			.elementor-8805 .elementor-element-4495464e,
			.elementor-8815 .elementor-element-3965ef4f,
			.elementor-9065 .elementor-element-36e3a76b) .elementor-widget-icon-list .elementor-icon-list-item {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		/* gallery media cards stagger up */
		body :is(
			.elementor-8859 .elementor-element-9e7b91a,
			.elementor-9024 .elementor-element-7f03a682,
			.elementor-8746 .elementor-element-60666e80,
			.elementor-8787 .elementor-element-75177e41,
			.elementor-8805 .elementor-element-386e3e70,
			.elementor-8815 .elementor-element-45be0f1d,
			.elementor-9065 .elementor-element-398a0627) .qodef-e-media-image {
			/* dc-focus-in (opacity+blur, NO transform) so the :hover
			   translateY lift + image scale aren't outranked by the entrance. */
			animation: dc-focus-in 640ms var(--dc-ease) both;
			animation-timeline: view();
			animation-range: entry 5% entry 55%;
		}
	}
}

/* ==========================================================================
   §5 PER-PAGE DIVERGENCES
   ========================================================================== */

/* 8766 prevenir-perdida-visual — the odd one out. Hero now carries REAL widgets
   (tools/salud-visual: dcsv0001 h6 eyebrow / dcsv0002 h1 / dcsv0003 subtitle)
   replacing the old pseudo-text — the page's H1 lives here now. The Elementor
   250px column padding computes to 0 (the title hugged the plate edge), so set
   a deliberate padding-inline; the text is max-width-capped so it stays left
   and clears the right-bleed photo. */
body .elementor-8766 .elementor-element-29aeab40 .elementor-element-6968250a > .elementor-widget-wrap {
	padding-inline: clamp(28px, 5vw, 72px);
	text-align: left;
}
/* eyebrow (dcsv0001 h6) */
body .elementor-8766 .elementor-element-dcsv0001 {
	margin-bottom: 10px;
}
body .elementor-8766 .elementor-element-dcsv0001 .elementor-heading-title {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
}
/* H1 (dcsv0002) → white display, left */
body .elementor-8766 .elementor-element-dcsv0002 .elementor-heading-title {
	color: #ffffff;
	font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 15ch;
}
/* supporting subtitle (dcsv0003) */
body .elementor-8766 .elementor-element-dcsv0003 {
	margin-top: 18px;
}
body .elementor-8766 .elementor-element-dcsv0003 p {
	margin: 0;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
	line-height: 1.45;
}
/* 8766 hero PHOTO-UNDER-SCRIM — the page's only detail hero with correct
   on-theme photography (DRS-2: the retina-camera exam, the exact service this
   page sells). Bleed it into the right of the plate under a left-heavy spruce
   scrim so the white title stays crisp and the dead right void becomes imagery.
   Overrides §1's `background-image:none` (same specificity, later source →
   wins). CSS bg isn't webp-rewritten by the media plugin → image-set + a
   root-relative preload (functions.php) that shares the passthru fetch. */
body .elementor-8766 .elementor-element.elementor-element-29aeab40:not(.elementor-motion-effects-element-type-background) {
	background-image:
		linear-gradient(101deg,
			var(--e-global-color-accent) 0%,
			var(--e-global-color-accent) 50%,
			rgba(0, 109, 107, 0.74) 66%,
			rgba(0, 109, 107, 0.16) 82%,
			transparent 100%),
		image-set(
			url("/wp-content/uploads-webpc/uploads/2026/05/DRS-2.png.webp") type("image/webp"),
			url("/wp-content/uploads/2026/05/DRS-2.png") type("image/png"));
	background-position: center, right center;
	background-size: cover, auto 108%;
	background-repeat: no-repeat, no-repeat;
}
/* 8766 content FALLBACK — before tools/salud-visual runs on an environment the
   article is still ONE text-editor (7866cc0b). Keep it readable (the feature
   cards below key off the post-split dcsv010x ids, which don't exist yet).
   Scoped to the monolith id so it never touches the split cards. */
body .elementor-8766 .elementor-element-7866cc0b > :is(h1, h2):first-child {
	font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
	margin: 0 0 12px;
}
body .elementor-8766 .elementor-element-7866cc0b :is(h2, h3):not(:first-child) {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.32;
	font-weight: 600;
	color: var(--dc-color-teal-text);
	margin: 30px 0 10px;
}

/* 8766 intro col1 is buttons-only — its siblings carry a hook headline there.
   Inject a content-derived hook above the pair (::before = first flex child of
   the wrap) so the left column reads intentional, not two floating buttons. */
body .elementor-8766 .elementor-element-64e10089 > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
body .elementor-8766 .elementor-element-64e10089 > .elementor-widget-wrap::before {
	content: "Una foto de retina protege tu visión";
	display: block;
	max-width: 16ch;
	margin-bottom: 24px;
	color: var(--e-global-color-accent);
	font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 700;
}

/* ==========================================================================
   8766 CONTENT — FEATURE SECTIONS. The monolithic article was split by
   tools/salud-visual into three bounded text-editors (dcsv0101 Riesgo /
   dcsv0102 Foto de retina / dcsv0103 Urgencia). Style each as a distinct
   feature card on the mint band so the long article reads as scannable blocks
   instead of one wall of prose. Reuses the house card language (white ground,
   hairline, radius-card, shadow-soft) + a mint icon-chip header (inline-SVG
   data-URI — no font weight). The redundant col2 image stays hidden (its DRS-2
   photo leads the hero). Punch list: delete widget 16719475 in Elementor.
   ========================================================================== */
body .elementor-8766 .elementor-element-16719475 {
	display: none;
}
/* col1 takes the full boxed width; its wrap becomes the centered card column */
body .elementor-8766 .elementor-element-6c44cf93 .elementor-element.elementor-element-4f698e88.elementor-column {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}
body .elementor-8766 .elementor-element-4f698e88 > .elementor-widget-wrap {
	max-width: min(780px, calc(100% - 32px));
	margin-inline: auto;
}
/* section eyebrow (h6 "Nuestros servicios") sits above the stack */
body .elementor-8766 .elementor-element-4c6554c0 {
	margin-bottom: 18px;
}

/* --- THE CARD (the 3 text-editors) --------------------------------------- */
body .elementor-8766 :is(
	.elementor-element-dcsv0101,
	.elementor-element-dcsv0102,
	.elementor-element-dcsv0103) {
	background: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: clamp(24px, 3vw, 40px);
	margin-bottom: clamp(20px, 3vw, 30px);
}
/* card body copy */
body .elementor-8766 :is(
	.elementor-element-dcsv0101,
	.elementor-element-dcsv0102,
	.elementor-element-dcsv0103) p {
	line-height: 1.6;
	color: var(--e-global-color-text);
}
/* card header (each card's H2) + mint icon chip */
body .elementor-8766 :is(
	.elementor-element-dcsv0101,
	.elementor-element-dcsv0102,
	.elementor-element-dcsv0103) h2 {
	position: relative;
	min-height: 46px;
	margin: 0 0 16px;
	padding-left: 62px;
	display: flex;
	align-items: center;
	font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
}
body .elementor-8766 :is(
	.elementor-element-dcsv0101,
	.elementor-element-dcsv0102,
	.elementor-element-dcsv0103) h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
/* per-card chip glyph (teal droplet / teal eye / crimson warning) */
body .elementor-8766 .elementor-element-dcsv0101 h2::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006D6B'%3E%3Cpath d='M12 2.6c-.36 0-.7.18-.9.49C9.7 5.3 5.6 11 5.6 14.5a6.4 6.4 0 0 0 12.8 0c0-3.5-4.1-9.2-5.5-11.41a1.07 1.07 0 0 0-.9-.49z'/%3E%3C/svg%3E");
}
body .elementor-8766 .elementor-element-dcsv0102 h2::before {
	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='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
body .elementor-8766 .elementor-element-dcsv0103 h2::before {
	background-color: rgba(217, 75, 75, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a1 1 0 0 0 .9 1.5h18.6a1 1 0 0 0 .9-1.5L13.7 3.9a1 1 0 0 0-1.7 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* --- CARD 1 (Riesgo): risk list as feature rows + prevenible callout ------ */
body .elementor-8766 .elementor-element-dcsv0101 ul {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}
body .elementor-8766 .elementor-element-dcsv0101 ul li {
	position: relative;
	padding: 11px 0 11px 30px;
	border-bottom: 1px solid var(--e-global-color-d59e8a8);
	line-height: 1.55;
}
body .elementor-8766 .elementor-element-dcsv0101 ul li:last-child {
	border-bottom: 0;
}
body .elementor-8766 .elementor-element-dcsv0101 ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1.05em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	box-shadow: 0 0 0 3px rgba(191, 227, 223, 0.4);
}
body .elementor-8766 .elementor-element-dcsv0101 ul li a {
	color: var(--dc-color-teal-text);
	font-weight: 600;
	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-8766 .elementor-element-dcsv0101 ul li a:hover {
	color: var(--e-global-color-accent);
	border-bottom-color: var(--dc-color-drop);
}
/* the "prevenible" callout (the <p> right after the risk <ul>) → mint strip */
body .elementor-8766 .elementor-element-dcsv0101 ul + p {
	margin: 18px 0 0;
	padding: 16px 20px;
	background: var(--e-global-color-cff305b);
	border-left: 3px solid var(--dc-color-drop);
	border-radius: 0 12px 12px 0;
	font-weight: 600;
	color: var(--e-global-color-accent);
}

/* --- CARD 2 (Foto de retina): sub-header, 3-up evaluables, closing line --- */
/* the "Qué se evalúa" sub-header (h3 that is NOT the last child) */
body .elementor-8766 .elementor-element-dcsv0102 h3:not(:last-child) {
	margin: 24px 0 6px;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--dc-color-teal-text);
}
/* the 3 evaluables → a 3-up mini-card row */
body .elementor-8766 .elementor-element-dcsv0102 ul {
	list-style: none;
	margin: 12px 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
body .elementor-8766 .elementor-element-dcsv0102 ul li {
	padding: 16px 14px;
	background: var(--e-global-color-cff305b);
	border: var(--dc-border);
	border-radius: 12px;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--e-global-color-text);
}
/* the standalone H3 (LAST child) → an emphasized pull-quote line */
body .elementor-8766 .elementor-element-dcsv0102 h3:last-child {
	margin: 22px 0 0;
	padding: 16px 20px;
	background: var(--e-global-color-cff305b);
	border-left: 3px solid var(--e-global-color-secondary);
	border-radius: 0 12px 12px 0;
	font-size: 1.05rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--dc-color-teal-text);
}

/* --- CARD 3 (Urgencia): the ALERT variant -------------------------------- */
body .elementor-8766 .elementor-element-dcsv0103 {
	background:
		linear-gradient(0deg, rgba(217, 75, 75, 0.05), rgba(217, 75, 75, 0.05)),
		#ffffff;
	border-color: rgba(217, 75, 75, 0.32);
}
body .elementor-8766 .elementor-element-dcsv0103 ul {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
body .elementor-8766 .elementor-element-dcsv0103 ul li {
	position: relative;
	padding-left: 26px;
	line-height: 1.5;
}
body .elementor-8766 .elementor-element-dcsv0103 ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dc-color-drop);
	box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.16);
}
/* the bare <div> warning → an alert note */
body .elementor-8766 .elementor-element-dcsv0103 div {
	margin-top: 14px;
	padding: 14px 18px;
	background: rgba(217, 75, 75, 0.08);
	border-radius: 12px;
	font-weight: 600;
	color: var(--dc-drop-deep);
	line-height: 1.5;
}
/* the WhatsApp CTA (last <p>'s link) → house button */
body .elementor-8766 .elementor-element-dcsv0103 p:last-child {
	margin: 18px 0 0;
}
body .elementor-8766 .elementor-element-dcsv0103 p:last-child a {
	display: inline-block;
	background: var(--e-global-color-secondary);
	color: #ffffff;
	padding: 14px 28px;
	border-radius: var(--dc-radius-btn);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--dc-shadow-soft);
	transition: background-color var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-8766 .elementor-element-dcsv0103 p:last-child a:hover {
	background: var(--dc-color-spruce-deep);
	box-shadow: var(--dc-shadow-lift);
}

/* --- closing e-button pair (loose children of the wrap) ------------------- */
body .elementor-8766 .elementor-element-4f698e88 > .elementor-widget-wrap > .e-button-base:first-of-type {
	margin-top: 8px;
}

/* --- feature-card entrances (scroll-driven, gated) ----------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8766 :is(
			.elementor-element-dcsv0101,
			.elementor-element-dcsv0102,
			.elementor-element-dcsv0103) {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		body .elementor-8766 .elementor-element-dcsv0001,
		body .elementor-8766 .elementor-element-dcsv0002,
		body .elementor-8766 .elementor-element-dcsv0003 {
			animation: dc-focus-in 640ms var(--dc-ease) both;
		}
	}
}

/* closing e-button rows (neuropatia dcb74601, consulta dcb90601) → house pair,
   centered as a quiet closing CTA. v4 atomic e-buttons render as direct
   children of the flexbox (SKILL §5). */
body :is(.elementor-8746 .elementor-element-dcb74601, .elementor-9065 .elementor-element-dcb90601) {
	justify-content: center;
	gap: 14px;
	padding-block: clamp(24px, 3vw, 40px);
}

/* ==========================================================================
   §5c NEUROPATÍA (8746) CONTENT — FEATURE SECTIONS + media pairing.
   The monolithic Sudoscan article (one text-editor) was split by
   tools/neuropatia-sudoscan into three bounded text-editors (dcnp0101 Estudio
   Sudoscan / dcnp0102 Signos tempranos / dcnp0103 Qué hacer si úlcera) and the
   4-image gallery (4f699c5b) was moved into the same column, seated after
   card1 — so the Sudoscan imagery PAIRS with the Sudoscan card instead of
   floating in a half-empty second column (the old 2-col left a large dead void
   beside the lower prose). The single full-width column's wrap becomes a 2-col
   grid: [eyebrow + H2] header spans → [card1 | gallery] top row → [card2] →
   [card3 alert] full width. Same house card language as §5 salud-visual (white
   ground, hairline, radius-card, shadow-soft, mint icon-chip headers as
   inline-SVG data-URIs — no font weight). §3 already casts the section on the
   mint band + styles the Qi H2 + the gallery media-cards; this only composes
   the cards + the grid. A monolith-id fallback keeps the page readable on an
   env where the CSS lands before the runbook has run.
   ========================================================================== */

/* col1 takes the full boxed width (col2 was removed by the runbook) */
body .elementor-8746 .elementor-element-60666e80 .elementor-element.elementor-element-6a366c7e.elementor-column {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}
/* its wrap → the composed grid. Header + full-width cards span both tracks;
   card1 + gallery share the first content row. */
body .elementor-8746 .elementor-element-6a366c7e > .elementor-widget-wrap {
	max-width: min(1160px, calc(100% - 32px));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	column-gap: clamp(22px, 3vw, 44px);
	row-gap: clamp(22px, 3.2vw, 34px);
	align-items: start;
}
body .elementor-8746 :is(
	.elementor-element-e45ba,
	.elementor-element-1823b646,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) {
	grid-column: 1 / -1;
}
body .elementor-8746 .elementor-element-dcnp0101 {
	grid-column: 1;
	align-self: stretch;
}
body .elementor-8746 .elementor-element-60666e80 .elementor-element-4f699c5b {
	grid-column: 2;
	align-self: start;
	margin: 0;
}
/* the Qi H2 sits directly under the eyebrow now — tighten the gap it inherits */
body .elementor-8746 .elementor-element-1823b646 {
	margin-bottom: 4px;
}

/* --- THE CARD (the 3 text-editors) --------------------------------------- */
body .elementor-8746 :is(
	.elementor-element-dcnp0101,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) {
	background: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: clamp(24px, 3vw, 38px);
}
body .elementor-8746 :is(
	.elementor-element-dcnp0101,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) p {
	line-height: 1.6;
	color: var(--e-global-color-text);
}
body .elementor-8746 :is(
	.elementor-element-dcnp0101,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) p:last-child {
	margin-bottom: 0;
}
/* cards 2 & 3 span the full width — cap the reading measure so lines stay
   comfortable (card1 already reads at ~55ch inside its half-width cell) */
body .elementor-8746 .elementor-element-dcnp0102 p,
body .elementor-8746 .elementor-element-dcnp0103 ul {
	max-width: 82ch;
}
/* card header (each card's H2) + mint icon chip */
body .elementor-8746 :is(
	.elementor-element-dcnp0101,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) h2 {
	position: relative;
	min-height: 46px;
	margin: 0 0 16px;
	padding-left: 62px;
	display: flex;
	align-items: center;
	font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.7rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
}
body .elementor-8746 :is(
	.elementor-element-dcnp0101,
	.elementor-element-dcnp0102,
	.elementor-element-dcnp0103) h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
/* per-card chip glyph (teal activity/pulse · teal eye · crimson warning) */
body .elementor-8746 .elementor-element-dcnp0101 h2::before {
	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='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
}
body .elementor-8746 .elementor-element-dcnp0102 h2::before {
	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='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
body .elementor-8746 .elementor-element-dcnp0103 h2::before {
	background-color: rgba(217, 75, 75, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a1 1 0 0 0 .9 1.5h18.6a1 1 0 0 0 .9-1.5L13.7 3.9a1 1 0 0 0-1.7 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* --- CARD 1 (Estudio Sudoscan): lead line + inline cita link -------------- */
/* the em/strong "se puede revertir" opener → an emphasized teal lead */
body .elementor-8746 .elementor-element-dcnp0101 p:first-of-type {
	margin: 0 0 14px;
	font-size: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
	line-height: 1.4;
	font-weight: 600;
	color: var(--dc-color-teal-text);
}
body .elementor-8746 .elementor-element-dcnp0101 p:first-of-type em {
	font-style: normal;
}
/* inline "(programa tu cita aquí)" → subhead-link */
body .elementor-8746 .elementor-element-dcnp0101 a {
	color: var(--dc-color-teal-text);
	font-weight: 600;
	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-8746 .elementor-element-dcnp0101 a:hover {
	color: var(--e-global-color-accent);
	border-bottom-color: var(--dc-color-drop);
}

/* --- CARD 3 (Urgencia): the ALERT variant -------------------------------- */
body .elementor-8746 .elementor-element-dcnp0103 {
	background:
		linear-gradient(0deg, rgba(217, 75, 75, 0.05), rgba(217, 75, 75, 0.05)),
		#ffffff;
	border-color: rgba(217, 75, 75, 0.32);
}
body .elementor-8746 .elementor-element-dcnp0103 ul {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
body .elementor-8746 .elementor-element-dcnp0103 ul li {
	position: relative;
	padding: 12px 0 12px 28px;
	border-bottom: 1px solid rgba(217, 75, 75, 0.16);
	line-height: 1.55;
}
body .elementor-8746 .elementor-element-dcnp0103 ul li:last-child {
	border-bottom: 0;
}
body .elementor-8746 .elementor-element-dcnp0103 ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1.15em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dc-color-drop);
	box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.16);
}
/* the underlined "Consulta de inmediato" cita link → keep crimson emphasis */
body .elementor-8746 .elementor-element-dcnp0103 ul li a {
	color: var(--dc-drop-deep);
	text-decoration: none;
	border-bottom: 2px solid rgba(217, 75, 75, 0.45);
	transition: border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8746 .elementor-element-dcnp0103 ul li a:hover {
	border-bottom-color: var(--dc-color-drop);
}
body .elementor-8746 .elementor-element-dcnp0103 ul li span[style*="underline"] {
	text-decoration: none !important; /* the emphasis is carried by the link border now */
}

/* --- monolith fallback (env where CSS ships before the runbook) ----------- */
body .elementor-8746 .elementor-element-38f8dfda > h2:first-child {
	font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
	margin: 0 0 12px;
}
body .elementor-8746 .elementor-element-38f8dfda h2:not(:first-child) {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.32;
	font-weight: 600;
	color: var(--dc-color-teal-text);
	margin: 30px 0 10px;
}

/* --- mobile: collapse the grid to one column ----------------------------- */
@media (max-width: 767px) {
	body .elementor-8746 .elementor-element-6a366c7e > .elementor-widget-wrap {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	body .elementor-8746 :is(
		.elementor-element-dcnp0101,
		.elementor-element-60666e80 .elementor-element-4f699c5b,
		.elementor-element-dcnp0102,
		.elementor-element-dcnp0103) {
		grid-column: 1 / -1;
	}
	/* keep the gallery a compact 2×2 on mobile instead of 4 full-width images
	   stacked — 1600px of imagery would swamp the reading flow between cards.
	   Qi computes grid-template-columns to a single fixed px track on mobile
	   (JS-set, high specificity) → !important is the documented override. */
	body .elementor-8746 .elementor-element-4f699c5b .qodef-grid-inner {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px;
	}
}

/* --- feature-card entrances (scroll-driven, gated) ----------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8746 :is(
			.elementor-element-dcnp0101,
			.elementor-element-dcnp0102,
			.elementor-element-dcnp0103) {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}

/* ==========================================================================
   §5b CONSULTA (9065) — the buried FAQ prose → the site FAQ accordion.
   consulta.js turns the four <h2> questions in the process text-editor
   (7c1e876d) into single-open disclosures and flags the built container
   .dc-faq-mode; the chrome below mirrors the homepage dudas accordion
   (home.css §6c). Without the flag the moved prose still reads as tidy Q&A.
   The .dc-faq* classes are JS-authored + unique; scoped to 9065 anyway.
   ========================================================================== */
/* consulta.js mounts .dc-faq full-width below the section's 2-col; cap the
   measure + centre it (a homepage FAQ reads at ~700px, not edge-to-edge). */
body .elementor-9065 .dc-faq {
	max-width: min(760px, calc(100% - 40px));
	margin: 38px auto 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body .elementor-9065 .dc-faq .dc-faq-q {
	margin: 0;
}
/* let long questions wrap inside the flex button: flex:1 makes the label take
   the row (minus the chevron) and min-width:0 releases the min-content floor,
   so the text wraps instead of running under the chevron (esp. on mobile). */
body .elementor-9065 .dc-faq .dc-faq-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	white-space: normal; /* the <button> reset sets nowrap → text wouldn't wrap */
}

/* card chrome: white → mint-open ground (home.css §6c) */
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item {
	border: var(--dc-border);
	border-radius: 12px;
	background-color: #ffffff;
	overflow: hidden;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item:not(.dc-open):hover {
	background-color: rgba(191, 227, 223, 0.35);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item.dc-open {
	background-color: var(--e-global-color-cff305b);
	border-color: var(--e-global-color-primary);
}

/* question row: full-width button (native Enter/Space) + chevron chip */
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--dc-text-muted);
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item.dc-open .dc-faq-btn {
	color: var(--e-global-color-accent);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-label {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.35;
	font-weight: 600;
}
/* chevron chip: teal chevron; open = rotate 180 + teal fill + white chevron */
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-chev {
	flex: none;
	width: 30px;
	height: 30px;
	border: 1.5px solid var(--e-global-color-d59e8a8);
	border-radius: 50%;
	background-color: #ffffff;
	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-9065 .dc-faq.dc-faq-mode .dc-faq-btn:hover .dc-faq-chev {
	border-color: var(--e-global-color-secondary);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item.dc-open .dc-faq-chev {
	transform: rotate(180deg);
	background-color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	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 collapse: grid-rows 0fr→1fr + opacity (home.css §6c). The kill switch
   in style.css §5 already drops the transition under prefers-reduced-motion. */
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--dc-ease);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item.dc-open .dc-faq-panel {
	grid-template-rows: 1fr;
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 20px;
	opacity: 0;
	transition: opacity 0.25s var(--dc-ease);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-item.dc-open .dc-faq-inner {
	opacity: 1;
	padding-bottom: 18px;
	transition-delay: 0.08s;
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-inner :is(p, li) {
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.03rem);
	line-height: 1.6;
	color: var(--dc-text-muted);
}
body .elementor-9065 .dc-faq.dc-faq-mode .dc-faq-inner > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   §5d AUTHORED >100% WIDTHS — the cluster's horizontal-scroll bug
   Elementor's "custom width" control writes percentages above 100% as a
   desktop composition trick (a column bleeding past its neighbour). Below the
   desktop composition they are pure overflow: on /servicios/consulta/ at
   390px the text-editor after "Actúa para prevenir complicaciones" (7c1e876d,
   max-width 121.25%) rendered 424px wide and made the whole PAGE scroll
   sideways. Measured 2026-07-19; it is not a consulta bug — six of the eight
   detail pages author at least one:
     8859 15cb4786 100.7% · 27faa2bd 103.9%   8787 72308b63 108.8% · 75488dac 103.7%
     9024 6f05ad95 101.1% · 7b397a94 122.5%   8815 4da200a3 101.5%
     8766 1b0bf65c 100.4%                     9065 33798b1d · 4fd6f302 · 7c1e876d · 7d1e7f85
   One cap beats chasing ids, and it self-heals if an editor authors another.
   ========================================================================== */
@media (max-width: 1024px) {
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget.elementor-widget__width-initial {
		--container-widget-width: 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   §6 MOBILE (<768px) — kit failure classes for this cluster
   ========================================================================== */
@media (max-width: 767px) {
	/* hero: tighter inset + padding so the masthead isn't oversized */
	body :is(
		.elementor-8859 .elementor-element-2d9cef88,
		.elementor-9024 .elementor-element-5625ef0,
		.elementor-8746 .elementor-element-50792e1f,
		.elementor-8766 .elementor-element-29aeab40,
		.elementor-8787 .elementor-element-33cf2cc8,
		.elementor-8805 .elementor-element-41dc9f4,
		.elementor-8815 .elementor-element-59561f4d,
		.elementor-9065 .elementor-element-379292d5):not(.elementor-motion-effects-element-type-background) {
		max-width: calc(100% - 24px);
		padding-block: 40px;
		padding-inline: 22px;
	}
	/* chips shrink a touch */
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget-icon-list .elementor-icon-list-icon {
		width: 38px;
		height: 38px;
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget-icon-list .elementor-icon-list-text {
		font-size: 15px;
	}
	/* kit centers Qi titles on mobile — hold the left-editorial voice */
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746, .elementor-8766,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .qodef-m-title {
		text-align: left;
	}
	/* 8766 hero on mobile: the right-bleed photo is too narrow to read at this
	   width → recompose it as a full-bleed atmospheric ground under a heavy
	   top-to-bottom scrim so the white title stays legible. */
	body .elementor-8766 .elementor-element.elementor-element-29aeab40:not(.elementor-motion-effects-element-type-background) {
		background-image:
			linear-gradient(178deg, rgba(0, 74, 72, 0.72) 0%, rgba(0, 74, 72, 0.9) 100%),
			image-set(
				url("/wp-content/uploads-webpc/uploads/2026/05/DRS-2.png.webp") type("image/webp"),
				url("/wp-content/uploads/2026/05/DRS-2.png") type("image/png"));
		background-position: center, center 28%;
		background-size: cover, cover;
	}
	/* 8766 injected intro hook shrinks its measure with the column */
	body .elementor-8766 .elementor-element-64e10089 > .elementor-widget-wrap::before {
		max-width: none;
	}
	/* 8766 hero content: less inset at phone width */
	body .elementor-8766 .elementor-element-29aeab40 .elementor-element-6968250a > .elementor-widget-wrap {
		padding-inline: 24px;
	}
	/* 8766 feature cards: tighter padding; the 3-up evaluables → 1 column */
	body .elementor-8766 :is(
		.elementor-element-dcsv0101,
		.elementor-element-dcsv0102,
		.elementor-element-dcsv0103) {
		padding: 22px 20px;
	}
	body .elementor-8766 .elementor-element-dcsv0102 ul {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	body .elementor-8766 .elementor-element-dcsv0102 ul li {
		text-align: left;
	}
	/* card header chip stays inline with a shorter title line */
	body .elementor-8766 :is(
		.elementor-element-dcsv0101,
		.elementor-element-dcsv0102,
		.elementor-element-dcsv0103) h2 {
		padding-left: 56px;
		font-size: 1.25rem;
	}

	/* INTRO CTA PAIR ("Programa una cita" + "Llámanos"). These are NOT being
	   forced to stack — they WRAP. Both are elementor-widget__width-auto, so
	   they size to content: 192px + 161px = 353px in a 350px column (measured
	   2026-07-19 at 390px). Three pixels. Split the row exactly in half so the
	   pair always sits on one line with real space between.
	   `align-self` per item, never `align-items` on the shared widget-wrap —
	   that wrap also holds the hook and the benefit lists. */
	/* 8766 is deliberately NOT in this list: §5 rebuilt its intro column as a
	   COLUMN flex whose injected hook headline is the first flex item, so a
	   row-sharing rule can't reach its pair. Its two CTAs stay stacked. */
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto {
		/* 8px of slack, not 6: at an exact 50/50 the pair sums to precisely
		   100% and a single sub-pixel of rounding wraps them apart again. */
		width: calc(50% - 8px);
		max-width: calc(50% - 8px);
		margin: 0;
		align-self: stretch; /* equal height if one label wraps to two lines */
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto + .elementor-widget-button.elementor-widget__width-auto {
		margin-left: 12px; /* 2 × (50% − 8px) + 12px = 100% − 4px */
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto .elementor-button {
		width: 100%;
		height: 100%;
		justify-content: center;
		text-align: center;
		padding-inline: 12px;
	}

	/* FAQ answers carry phone numbers and wa.link URLs — unbroken strings that
	   would re-open the horizontal scroll §5d just closed. The question label
	   got this guard at §5b; the answers never did. */
	body .elementor-9065 .dc-faq-inner :is(p, li) {
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   §7 MOBILE GALLERY CAROUSEL (<768px)
   The Qi gallery's 2-col grid becomes four postage stamps at phone width.
   assets/js/servicios-detail.js flags the shortcode .dc-gal-mode and appends
   the dots; EVERY rule here is gated on that class, so with no JS (or above
   768px, where the grid reads fine) the stock widget is untouched.

   NOTE this markup is `.qodef-grid-item > .qodef-e-inner > a.qodef-popup-item
   > img` on all 7 galleries — the §3 rules keyed to `.qodef-e-media-image`
   never matched any of them (the caveat at §3's 9024 block is cluster-wide,
   not 9024-only). Hence the full treatment here rather than tweaks.
   ========================================================================== */
@media (max-width: 767px) {
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-mode .qodef-grid-inner {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		margin: 0;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		/* deliberately NO `scroll-behavior` — the JS passes an explicit
		   behavior to scrollTo(); a CSS value here would silently override
		   what it asks for (behavior:'auto' means "use the CSS value"). */
		overscroll-behavior-x: contain;
		scrollbar-width: none;          /* the dots are the affordance */
		-ms-overflow-style: none;
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-mode .qodef-grid-inner::-webkit-scrollbar {
		display: none;
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-mode .qodef-grid-item {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		scroll-snap-align: center;
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-mode .qodef-grid-item img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: var(--dc-radius-card);
		box-shadow: var(--dc-shadow-soft);
	}
	/* dots — the house data-chip voice: hairline pills, active one widens */
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 14px;
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--e-global-color-d59e8a8);
		cursor: pointer;
		transition: width var(--dc-speed) var(--dc-ease),
			background-color var(--dc-speed) var(--dc-ease);
	}
	body :is(
		.elementor-8859, .elementor-9024, .elementor-8746,
		.elementor-8787, .elementor-8805, .elementor-8815, .elementor-9065
		) .dc-gal-dot[aria-current="true"] {
		width: 22px;
		background: var(--e-global-color-secondary);
	}
}