/* ==========================================================================
   DIABETCENTRO — SERVICIOS hub (page 8589; enqueued via is_page()). Same
   override convention as style.css: Elementor's own selector + `body` prefix.
   House keyframes/tokens live in style.css §1/§5.

   Section map (verified 2026-07-12 from _elementor_data):
     7ed08d02 HERO   : section BG=lab-2.jpg + Qi animated-text "Servicios".
     1f39e001 INTRO  : col1 editorial hook (633424f1) | col2 text-editor
                       (4e6dee1e: H1 "Servicios en Diabetcentro" + body +
                       "¿Cómo saber…?" + bullets + button pair).
     dd19bb2  CARDS-1: col-100 with 4 Qi info_cards (visual/pies/cardiaca/lab).
     86d90d3  CARDS-2: flex container, 3 info_cards + nested 46af8ac (1 card)
                       (hepática/renal/vascular/tecnología) — 8 cards total.
     60b1adfa EXPERTOS: eyebrow (14cd1faf) + Qi H2 "Expertos" (1a412f77) +
                       text + 2 specialty icon-lists + WA button | col2 images.

   Info-card anatomy: .qodef-qi-info-cards.qodef-layout--top.qodef--icon-pack →
     .qodef-m-icon-wrapper > .qodef-m-icon-holder > svg
     .qodef-m-content > h6.qodef-m-subtitle (eyebrow) + h4.qodef-m-title>a +
       p.qodef-m-text + .qodef-m-button (.qodef-qi-button "Más información").

   PUNCH LIST (DB/Elementor — code can't reach): every card's title link AND
   button href is "" (dead) — the hub's primary service navigation goes
   nowhere. Suggested map: visual→/prevenir-perdida-visual/, pies→/neuropatia/,
   cardiaca→/salud-del-corazon/, hepática+renal→/evaluacion-…-ultrasonidos/,
   vascular→/salud-del-corazon/, tecnología→/monitoreo/, laboratorio→client
   decision. Needs client sign-off before wiring.
   ========================================================================== */

/* ==========================================================================
   §1 HERO — spruce masthead over the lab photo (photo-under-scrim recipe)
   ========================================================================== */
body .elementor-8589 .elementor-element.elementor-element-7ed08d02 {
	position: relative;
	overflow: hidden;
	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(56px, 6.5vw, 104px);
}
/* swap the section's classic bg (Elementor still holds the generic lab-2.jpg)
   for the real Diabetcentro reception scene. The scrim rides its own overlay
   div below, so we only touch the photo layer here. CSS backgrounds aren't
   webp-rewritten by the media plugin → image-set (webp→jpeg) + a root-relative
   LCP preload in functions.php that shares the one passthru-free fetch. 1920w
   ≈ 1.6× the boxed 1200px plate; behind the spruce scrim q72 is imperceptible.
   Mirror Elementor's generated bg selector (+body → wins by one type selector).
   PUNCH LIST: set this same photo as the section background in Elementor so the
   editor canvas matches the front end (then this override becomes belt-and-braces). */
body .elementor-8589 .elementor-element.elementor-element-7ed08d02:not(.elementor-motion-effects-element-type-background) {
	background-image: url("/wp-content/themes/hello-elementor-child/assets/img/recepcion-clinica-diabetcentro.jpg");
	background-image: image-set(
		url("/wp-content/themes/hello-elementor-child/assets/img/recepcion-clinica-diabetcentro.webp") type("image/webp"),
		url("/wp-content/themes/hello-elementor-child/assets/img/recepcion-clinica-diabetcentro.jpg") type("image/jpeg"));
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* scrim: a left-heavy READABILITY gradient over the reception photo — near-solid
   spruce under the eyebrow + "Servicios" title (left third), then a fast falloff so
   the reception desk / receptionist (centre-right) read as real photography, not a
   flat teal panel. FULL kit selector (+.elementor-element, +body) so opacity:1 finally
   beats Elementor's own opacity:0.3 — the 2026-07-12 rule dropped .elementor-element and
   silently lost at 4-vs-3 classes, capping the scrim at 0.3 (photo washed out). */
body .elementor-8589 .elementor-element.elementor-element-7ed08d02 > .elementor-background-overlay {
	opacity: 1;
	background: linear-gradient(100deg,
		rgba(0, 74, 72, 0.93) 0%,
		rgba(0, 74, 72, 0.82) 30%,
		rgba(0, 109, 107, 0.50) 44%,
		rgba(0, 109, 107, 0.14) 66%,
		rgba(0, 109, 107, 0.05) 100%);
}
/* a mint glow top-right for depth */
body .elementor-8589 .elementor-element-7ed08d02::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(80% 110% at 94% 6%, rgba(191, 227, 223, 0.14), transparent 50%);
}
body .elementor-8589 .elementor-element-7ed08d02 > .elementor-container {
	position: relative;
	z-index: 1;
}
/* title: white display, left-aligned; eyebrow above (real ::before text) */
body .elementor-8589 .elementor-element-7ed08d02 .elementor-widget-qi_addons_for_elementor_animated_text {
	text-align: left;
}
body .elementor-8589 .elementor-element-7ed08d02 .elementor-widget-qi_addons_for_elementor_animated_text::before {
	content: "NUESTROS 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);
}
body .elementor-8589 .elementor-element-7ed08d02 .qodef-m-title,
body .elementor-8589 .elementor-element-7ed08d02 .qodef-m-title *,
body .elementor-8589 .elementor-element-7ed08d02 .qodef-m-title .qodef-e-word {
	color: #ffffff;
	text-align: left;
	opacity: 1;
	transform: none;
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	font-weight: 700;
}
body .elementor-8589 .elementor-element-7ed08d02 .qodef-m-title.qodef--alignment-center {
	text-align: left;
}

/* ==========================================================================
   §2 INTRO — editorial hook | H1 lead + body + question + bullets + buttons
   ========================================================================== */
/* col1 editorial hook (Qi animated-text) → dark display, left */
body .elementor-8589 .elementor-element-633424f1 .qodef-m-title,
body .elementor-8589 .elementor-element-633424f1 .qodef-m-title *,
body .elementor-8589 .elementor-element-633424f1 .qodef-m-title .qodef-e-word {
	color: var(--e-global-color-accent);
	text-align: left;
	opacity: 1;
	transform: none;
	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: the leading H1 stays the page display headline; the inner
   "¿Cómo saber…?" heading demotes to subhead voice; bullets → brand markers */
body .elementor-8589 .elementor-element-4e6dee1e h1 {
	font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
	margin: 0 0 14px;
}
body .elementor-8589 .elementor-element-4e6dee1e :is(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: 24px 0 12px;
}
body .elementor-8589 .elementor-element-4e6dee1e ul {
	list-style: none;
	margin: 14px 0;
	padding: 0;
}
body .elementor-8589 .elementor-element-4e6dee1e ul li {
	position: relative;
	padding-left: 26px;
	margin-block: 7px;
	line-height: 1.55;
}
body .elementor-8589 .elementor-element-4e6dee1e 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);
}
/* intro button pair: primary teal (kit), secondary → ghost */
body .elementor-8589 .elementor-element-1f39e001 .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 .elementor-8589 .elementor-element-1f39e001 .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 SERVICE CARDS — the homepage card system (white ground, hairline, radius,
   icon chip, eyebrow, title, text, arrow link, hover lift + teal hairline).
   Two rows live in different containers (classic section + flex) → grid each.
   ========================================================================== */

/* grid the two rows 4-up (they already render 4-across; normalise gaps) */
body .elementor-8589 .elementor-element-dd19bb2 .elementor-widget-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	align-items: stretch;
}
body .elementor-8589 .elementor-element-86d90d3.e-con,
body .elementor-8589 .elementor-element-86d90d3 > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	align-items: stretch;
}
/* the nested single-card container (46af8ac) fills its own grid cell */
body .elementor-8589 .elementor-element-46af8ac {
	display: flex;
	margin: 0;
	width: 100%;
}
/* each info_cards WIDGET must fill its grid cell — Elementor's
   __width-initial + Qi's own sizing shrink-wrap it to ~70px otherwise; grid
   justify-self:stretch can't beat that, so force it (SKILL §5 !important). */
body .elementor-8589 .elementor-element-dd19bb2 .elementor-widget-wrap > .elementor-element.elementor-widget-qi_addons_for_elementor_info_cards,
body .elementor-8589 .elementor-element-86d90d3 .elementor-element.elementor-widget-qi_addons_for_elementor_info_cards {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
	--container-widget-width: 100%;
}

/* THE CARD: white ground, hairline, radius 16, generous padding, hover lift.
   bg !important beats Qi's holder_background classic (a light #E6ECEF painted
   via its own class rule, not reachable by plain specificity). */
body .elementor-8589 .qodef-qi-info-cards.qodef-m {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 26px 24px 22px;
	text-align: left;
	background-color: #ffffff !important;
	border: 1px solid var(--e-global-color-d59e8a8);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	transition: transform var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8589 .qodef-qi-info-cards.qodef-m:hover {
	transform: translateY(-4px);
	border-color: var(--e-global-color-secondary);
	box-shadow: var(--dc-shadow-lift);
}

/* icon → 46px mint circle, teal glyph; blooms teal on hover */
body .elementor-8589 .qodef-qi-info-cards .qodef-m-icon-wrapper {
	margin: 0 0 6px;
}
body .elementor-8589 .qodef-qi-info-cards .qodef-m-icon-holder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	transition: background-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8589 .qodef-qi-info-cards .qodef-m-icon-holder svg {
	width: 20px;
	height: 20px;
	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 .elementor-8589 .qodef-qi-info-cards.qodef-m:hover .qodef-m-icon-holder {
	background-color: var(--e-global-color-secondary);
}
body .elementor-8589 .qodef-qi-info-cards.qodef-m:hover .qodef-m-icon-holder svg {
	color: #ffffff;
	fill: #ffffff;
}

/* eyebrow subtitle (h6) → data-label voice */
body .elementor-8589 .qodef-qi-info-cards .qodef-m-subtitle {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
}
/* title (h4) → card headline, spruce; hover teal */
body .elementor-8589 .qodef-qi-info-cards .qodef-m-title {
	margin: 0;
	font-size: 1.22rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}
body .elementor-8589 .qodef-qi-info-cards .qodef-m-title,
body .elementor-8589 .qodef-qi-info-cards .qodef-m-title a {
	color: var(--e-global-color-accent);
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-8589 .qodef-qi-info-cards.qodef-m:hover .qodef-m-title,
body .elementor-8589 .qodef-qi-info-cards.qodef-m:hover .qodef-m-title a {
	color: var(--dc-color-teal-text);
}
/* description → muted body, grows to push the link to the card foot */
body .elementor-8589 .qodef-qi-info-cards .qodef-m-text {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--dc-text-muted);
}
/* the "Más información" link → teal arrow link */
body .elementor-8589 .qodef-qi-info-cards .qodef-m-button {
	margin-top: 6px;
}
body .elementor-8589 .qodef-qi-info-cards .qodef-m-button .qodef-qi-button {
	color: var(--dc-color-teal-text);
	font-weight: 600;
	font-size: 0.92rem;
}
body .elementor-8589 .qodef-qi-info-cards .qodef-m-button .qodef-qi-button .qodef-m-icon {
	transition: transform var(--dc-speed) var(--dc-ease);
}
body .elementor-8589 .qodef-qi-info-cards.qodef-m:hover .qodef-m-button .qodef-qi-button .qodef-m-icon {
	transform: translateX(4px);
}

/* ==========================================================================
   §4 EXPERTOS — mint beat: eyebrow + display H2 + specialty chips + WA button
   ========================================================================== */
body .elementor-8589 .elementor-element-60b1adfa {
	background-color: var(--e-global-color-cff305b);
	padding-block: clamp(52px, 6vw, 92px);
}
/* eyebrow heading → h6 voice */
body .elementor-8589 .elementor-element-14cd1faf .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;
}
/* H2 "Expertos" → display, dark, left */
body .elementor-8589 .elementor-element-1a412f77 .qodef-m-title,
body .elementor-8589 .elementor-element-1a412f77 .qodef-m-title *,
body .elementor-8589 .elementor-element-1a412f77 .qodef-m-title .qodef-e-word {
	color: var(--e-global-color-accent);
	text-align: left;
	opacity: 1;
	transform: none;
	font-size: clamp(2.2rem, 1.7rem + 2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
}
/* the two specialty icon-lists → tidy check rows (2-up), teal ticks */
body .elementor-8589 .elementor-element-60b1adfa .elementor-widget-icon-list .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}
body .elementor-8589 .elementor-element-60b1adfa .elementor-widget-icon-list .elementor-icon-list-item {
	padding: 7px 0;
}
body .elementor-8589 .elementor-element-60b1adfa .elementor-widget-icon-list .elementor-icon-list-icon svg,
body .elementor-8589 .elementor-element-60b1adfa .elementor-widget-icon-list .elementor-icon-list-icon i {
	color: var(--e-global-color-secondary);
	fill: var(--e-global-color-secondary);
}
body .elementor-8589 .elementor-element-60b1adfa .elementor-widget-icon-list .elementor-icon-list-text {
	color: var(--e-global-color-text, #333F46);
}
/* WhatsApp button — house primary teal (kit already fills it; ensure shadow) */
body .elementor-8589 .elementor-element-38a079de .elementor-button {
	box-shadow: var(--dc-shadow-soft);
}
/* the right-column expert imagery → media cards */
body .elementor-8589 .elementor-element-660a57ff .elementor-widget-image img {
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
}

/* ==========================================================================
   §5 DEPTH — house entrances (scroll-driven, gated)
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8589 .elementor-element-7ed08d02 .qodef-m-title {
			animation: dc-focus-in 720ms var(--dc-ease) both;
		}
		/* dc-focus-in (opacity+blur, NO transform) — a transform-owning entrance
		   like dc-card-rise outranks the :hover translateY lift and kills it. */
		body .elementor-8589 .qodef-qi-info-cards.qodef-m {
			animation: dc-focus-in 640ms var(--dc-ease) both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
	}
}

/* ==========================================================================
   §6 MOBILE (<768px)
   ========================================================================== */
@media (max-width: 767px) {
	body .elementor-8589 .elementor-element.elementor-element-7ed08d02 {
		max-width: calc(100% - 24px);
		padding-block: 44px;
		padding-inline: 22px;
	}
	/* cards → single column, comfortable */
	body .elementor-8589 .elementor-element-dd19bb2 .elementor-widget-wrap,
	body .elementor-8589 .elementor-element-86d90d3.e-con,
	body .elementor-8589 .elementor-element-86d90d3 > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	body .elementor-8589 .qodef-m-title {
		text-align: left;
	}
}

/* 2-up cards on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-8589 .elementor-element-dd19bb2 .elementor-widget-wrap,
	body .elementor-8589 .elementor-element-86d90d3.e-con,
	body .elementor-8589 .elementor-element-86d90d3 > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}