/* ==========================================================================
   DIABETCENTRO — equipo member pages (enqueued via is_page(), see
   functions.php). Same override convention as style.css: Elementor's own
   selector + `body` prefix. House entrance keyframes live in style.css §5.

   Fabiola 8687 / Alejandro 8683 / Luis 8851 / Melanie 8843 / Byron 8837
   share ONE hand-cloned skeleton — §1 styles it via widget classes inside
   the five page scopes; §2 carries the per-page divergences. Byron joined
   2026-07-11 via the tools/byron-rebuild runbook (pre-chosen element ids
   dcb80001 band / dcb80010 education / dcb80013 portrait). 9276
   (Experiencia y publicaciones) is its own layout → §4.

   Skeleton roles (per-page data-ids in the role table, PUNCHLIST.md):
   name (Qi animated_text) → inner info section (2 cols of h6-label/h5-value
   heading pairs + WhatsApp icon-list) → divider → education heading → bio
   text-editor ‖ portrait image column (+ Fabiola-only WA-QR image).
   Most left-column widgets carry Elementor's own fadeIn — house entrances
   only where Elementor has none (portrait).
   ========================================================================== */

/* -- §1 SHARED SKELETON ---------------------------------------------------- */

/* Mint masthead band (the homepage dock move, painted): the outer skeleton
   section draws a mint-cast band behind eyebrow/name/divider; the white
   info card and the portrait plate STRADDLE its edge (their shadows carry
   the dock read). --dc-band is per-page (name line-counts differ) with a
   mobile value in the <768 block; the portrait column starts at section
   top, so it crosses the seam at every height. */
body :is(
	.elementor-8687 .elementor-element.elementor-element-450654b7,
	.elementor-8683 .elementor-element.elementor-element-55fd12fe,
	.elementor-8851 .elementor-element.elementor-element-1f3f13d1,
	.elementor-8843 .elementor-element.elementor-element-1308b180,
	.elementor-8837 .elementor-element.elementor-element-dcb80001) {
	--dc-band: 320px;
	background: linear-gradient(180deg,
		var(--e-global-color-cff305b) 0 var(--dc-band),
		#ffffff var(--dc-band));
	padding-top: clamp(28px, 4vw, 48px);
}
body .elementor-8683 .elementor-element.elementor-element-55fd12fe {
	--dc-band: 380px; /* two-line name */
}

/* Name = the page's display headline (lead scale 42→66). Styled on the
   widget, not the tag — the punch-list H3→H1 retags stay visually inert. */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-qi_addons_for_elementor_animated_text .qodef-m-title {
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--e-global-color-accent);
}
/* eyebrow stopgap — drop this rule when the real h6 widgets land (punch list) */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-qi_addons_for_elementor_animated_text .qodef-qi-animated-text::before {
	content: "Equipo profesional";
	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);
}
/* the hero divider motif: crimson head + teal body (home.css hero pattern) */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-qi_addons_for_elementor_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);
}

/* Info strip (the skeleton's ONE inner section) → white hairline data card.
   The h6/h5 heading pairs adopt the data-chip voices from the homepage's
   info strip: tracked LABEL over left-aligned value. */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-inner-section {
	background-color: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: 22px 24px 10px;
	margin-top: 26px;
}
/* the card rises into its straddle position (the inner section carries no
   authored Elementor animation — its widgets fade individually inside) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-inner-section {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-inner-section h6.elementor-heading-title {
	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);
	margin-bottom: 3px;
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-inner-section h5.elementor-heading-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--e-global-color-text, #333F46);
	margin-bottom: 14px;
}

/* WhatsApp icon-list → the 42px circle chip with teal hover bloom */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-item > a {
	align-items: center;
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0; /* Elementor's 12px icon-to-text padding skews the glyph */
	margin-right: 12px;
	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 :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-icon svg {
	width: 16px;
	height: 16px;
	fill: var(--dc-color-teal-text);
	transition: fill var(--dc-speed) var(--dc-ease);
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums; /* phone digits align (house data voice) */
	color: var(--dc-color-teal-text);
	transition: color var(--dc-speed) var(--dc-ease);
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .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 :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg {
	fill: #ffffff;
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-icon-list .elementor-icon-list-item > a:hover .elementor-icon-list-text {
	color: var(--e-global-color-accent);
}

/* divider → mint hairline */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-divider .elementor-divider-separator {
	border-block-start: 1px solid var(--e-global-color-d59e8a8);
}

/* bio prose: readable measure, house link voice */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-text-editor {
	max-width: 65ch;
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-text-editor a {
	color: var(--dc-color-teal-text);
	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 :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-widget-text-editor a:hover {
	color: var(--e-global-color-accent);
	border-color: var(--dc-color-drop);
}

/* Education heading → subhead voice regardless of authored tag (H3 on
   Fabiola, H6 elsewhere — punch list normalizes; this stays correct). */
body :is(
	.elementor-8687 .elementor-element.elementor-element-779c1731,
	.elementor-8683 .elementor-element.elementor-element-3ca197a6,
	.elementor-8851 .elementor-element.elementor-element-dd096a9,
	.elementor-8843 .elementor-element.elementor-element-47dc4c99,
	.elementor-8837 .elementor-element.elementor-element-dcb80010) .elementor-heading-title {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dc-color-teal-text);
	margin: 26px 0 10px;
}

/* Portrait: radius-24 media plate at a uniform 4:5, focus-in arrival.
   NOTE Fabiola's source (Fabiola-Prado-1.png) is 288px — punch list swaps
   in the higher-res Dr-Fabiola-Prado.jpg; the plate is capped at 440px so
   the upscale stays tolerable meanwhile. */
body :is(
	.elementor-8687 .elementor-element.elementor-element-2a01c5e2,
	.elementor-8683 .elementor-element.elementor-element-34b0a33d,
	.elementor-8851 .elementor-element.elementor-element-17b3b338,
	.elementor-8843 .elementor-element.elementor-element-648b6386,
		.elementor-8837 .elementor-element.elementor-element-dcb80013) img {
	width: 100%;
	max-width: 440px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body :is(
			.elementor-8687 .elementor-element.elementor-element-2a01c5e2,
			.elementor-8683 .elementor-element.elementor-element-34b0a33d,
			.elementor-8851 .elementor-element.elementor-element-17b3b338,
			.elementor-8843 .elementor-element.elementor-element-648b6386,
			.elementor-8837 .elementor-element.elementor-element-dcb80013) {
			animation: dc-focus-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}
/* ambient: the plate floats gently (the homepage results-photo move; no
   clipping needed — Fabiola's caption sits outside the img) */
@media (prefers-reduced-motion: no-preference) {
	body :is(
		.elementor-8687 .elementor-element.elementor-element-2a01c5e2,
		.elementor-8683 .elementor-element.elementor-element-34b0a33d,
		.elementor-8851 .elementor-element.elementor-element-17b3b338,
		.elementor-8843 .elementor-element.elementor-element-648b6386,
		.elementor-8837 .elementor-element.elementor-element-dcb80013) img {
		animation: dc-float-far 10s ease-in-out infinite;
	}
}

/* Cita CTAs are Elementor-v4 atomic e-buttons (kit blue, flush pair) —
   house voice: first reads primary teal, any sibling goes ghost. Byron's
   page (8837) carries one too, so his scope joins this rule only. */
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837, .elementor-9276) .e-button-base {
	display: inline-block;
	background: var(--e-global-color-secondary);
	border: 1.5px solid var(--e-global-color-secondary);
	border-radius: var(--dc-radius-btn);
	padding: 14px 28px;
	margin: 14px 12px 0 0;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 54, 52, 0.1), 0 6px 16px -6px rgba(0, 54, 52, 0.35);
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837, .elementor-9276) .e-button-base:is(:hover, :focus) {
	background: var(--dc-color-spruce-deep);
	border-color: var(--e-global-color-accent);
	color: #ffffff;
	box-shadow: var(--dc-shadow-lift);
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837, .elementor-9276) .e-button-base ~ .e-button-base {
	background: transparent;
	color: var(--dc-color-teal-text);
	box-shadow: none;
}
body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837, .elementor-9276) .e-button-base ~ .e-button-base:is(:hover, :focus) {
	background: rgba(191, 227, 223, 0.35);
	color: var(--e-global-color-accent);
	border-color: var(--e-global-color-accent);
}

/* -- §2 PER-PAGE DIVERGENCES ------------------------------------------------ */

/* <768px: reverse-mobile already stacks the portrait first; center it and
   compact the info card (SKILL §6 grammar). */
@media (max-width: 767px) {
	body :is(
		.elementor-8687 .elementor-element.elementor-element-2a01c5e2,
		.elementor-8683 .elementor-element.elementor-element-34b0a33d,
		.elementor-8851 .elementor-element.elementor-element-17b3b338,
		.elementor-8843 .elementor-element.elementor-element-648b6386,
		.elementor-8837 .elementor-element.elementor-element-dcb80013) img {
		/* the kit zeroes the column padding <768 — inset the plate so its
		   radius-24 corners read instead of kissing the screen edges */
		display: block;
		max-width: min(420px, calc(100% - 32px));
		margin-inline: auto;
	}
	body :is(.elementor-8687, .elementor-8683, .elementor-8851, .elementor-8843, .elementor-8837) .elementor-inner-section {
		padding: 18px 18px 6px;
	}
	/* reverse-mobile puts the portrait first — the band becomes its mint
	   backdrop, the photo straddling its lower edge */
	body :is(
		.elementor-8687 .elementor-element.elementor-element-450654b7,
		.elementor-8683 .elementor-element.elementor-element-55fd12fe,
		.elementor-8851 .elementor-element.elementor-element-1f3f13d1,
		.elementor-8843 .elementor-element.elementor-element-1308b180,
		.elementor-8837 .elementor-element.elementor-element-dcb80001) {
		--dc-band: 300px;
		padding-top: 24px;
	}
}

/* -- §3 (retired) — Byron 8837 joined the §1 skeleton 2026-07-11 -------------
   The tools/byron-rebuild runbook rebuilt his page from Luis's skeleton with
   pre-chosen element ids (dcb80001 band · dcb80010 education · dcb80013
   portrait — now in every §1 list above) and flipped the template to
   Elementor Full Width; the old pasted-blob interim rules died here. */

/* -- §4 EXPERIENCIA Y PUBLICACIONES (9276) ---------------------------------- */

/* masthead joins the house anatomy: eyebrow over the lead H1, two-tone
   divider under it (member masthead motifs on a heading widget) */
body .elementor-9276 .elementor-element.elementor-element-6016e4b2 .elementor-heading-title::before {
	content: "Equipo profesional";
	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-9276 .elementor-element.elementor-element-6016e4b2 .elementor-heading-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);
}

/* collage: the homepage's full depth-gallery treatment on the same
   Qi parallax-images widget — layered shadows, ambient floats (near layer
   faster w/ slight rotation), depth arrival, opposing parallax rates.
   Widget-level Elementor fadeIn composes with these (inner-layer motion). */
body .elementor-9276 .qodef-qi-parallax-images img {
	border-radius: var(--dc-radius-media);
}
body .elementor-9276 .qodef-qi-parallax-images .qodef-e-main-image img {
	box-shadow: var(--dc-shadow-soft);
}
body .elementor-9276 .qodef-qi-parallax-images .qodef-e-parallax-image img {
	box-shadow: var(--dc-shadow-lift);
}
@media (prefers-reduced-motion: no-preference) {
	body .elementor-9276 .qodef-qi-parallax-images .qodef-e-main-image {
		animation: dc-float-far 9s ease-in-out infinite;
	}
	body .elementor-9276 .qodef-qi-parallax-images .qodef-e-parallax-image img {
		animation: dc-float-near 7s ease-in-out infinite;
	}
	@supports (animation-timeline: view()) {
		body .elementor-9276 .qodef-qi-parallax-images .qodef-e-main-image-zoom-holder {
			animation: dc-focus-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		body .elementor-9276 .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-9276 .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%;
		}
	}
}

/* lead H1 (heading widget 6016e4b2) takes the display lead — the kit
   authored it centered/near-black; the page joins the left-editorial voice */
body .elementor-9276 .elementor-element.elementor-element-6016e4b2 .elementor-heading-title {
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--e-global-color-accent);
	text-align: left;
}
/* Qi animated H3 under the H1 ("Ciencia que respalda…") → subhead voice */
body .elementor-9276 .elementor-element.elementor-element-1dcf1559 .qodef-m-title {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--dc-color-teal-text);
	text-align: left;
}
/* section-2 Qi animated H2 rejoins the standard display scale, left */
body .elementor-9276 .elementor-element.elementor-element-1e0a21a9 .qodef-m-title {
	font-size: clamp(2.4rem, 1.88rem + 2.2vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--e-global-color-accent);
	text-align: left;
}
/* pasted-content H2s inside the prose blocks render at display scale —
   rein them to prose-subhead size (retags are punch-listed) */
body .elementor-9276 .elementor-widget-text-editor h2 {
	font-size: clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem);
	line-height: 1.25;
	color: var(--e-global-color-accent);
	margin: 26px 0 10px;
}
/* the SECOND H1 lives inside the pasted text block (5dcccfa7) — demote to
   subhead voice visually; the retag to H2 is punch-listed */
body .elementor-9276 .elementor-element.elementor-element-5dcccfa7 h1 {
	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: 24px 0 8px;
}
/* prose measure + portrait plate (zoom in an overflow-hidden plate,
   focus-in arrival — the widget carries no authored animation) */
body .elementor-9276 .elementor-widget-text-editor {
	max-width: 68ch;
}
body .elementor-9276 .elementor-element.elementor-element-78c2a7d3 {
	overflow: hidden;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
}
body .elementor-9276 .elementor-element.elementor-element-78c2a7d3 img {
	display: block;
	border-radius: 0; /* the plate clips */
	transition: transform 300ms var(--dc-ease);
}
body .elementor-9276 .elementor-element.elementor-element-78c2a7d3:hover img {
	transform: scale(1.03);
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-9276 .elementor-element.elementor-element-78c2a7d3 {
			animation: dc-focus-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}

/* the two Qi info-cards close the page: "Todos los servicios" as a white
   house card, "Agenda una cita" as the page's DARK BEAT — a small spruce
   panel in the final-CTA voice */
body .elementor-9276 .elementor-element.elementor-element-5e0e6824 .qodef-qi-info-cards {
	background-color: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	padding: 20px 22px;
	transition: border-color var(--dc-speed) var(--dc-ease),
		transform var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-9276 .elementor-element.elementor-element-5e0e6824:hover .qodef-qi-info-cards {
	border-color: var(--e-global-color-secondary);
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-soft);
}
body .elementor-9276 .elementor-element.elementor-element-41dd40c8 .qodef-qi-info-cards {
	background-color: var(--e-global-color-accent);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--dc-radius-card);
	padding: 20px 22px;
	box-shadow: var(--dc-shadow-soft);
	transition: transform var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-9276 .elementor-element.elementor-element-41dd40c8:hover .qodef-qi-info-cards {
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-lift);
}
body .elementor-9276 .elementor-element.elementor-element-41dd40c8 .qodef-qi-info-cards :is(.qodef-m-title, .qodef-m-title a) {
	color: #ffffff;
}
body .elementor-9276 .elementor-element.elementor-element-41dd40c8 .qodef-qi-info-cards .qodef-m-text {
	color: rgba(255, 255, 255, 0.88);
}
body .elementor-9276 .elementor-element.elementor-element-41dd40c8 .qodef-qi-info-cards :is(.qodef-m-icon-holder, .qodef-m-icon-holder a, .qodef-m-button .qodef-qi-button) {
	color: var(--e-global-color-primary);
}