/* ==========================================================================
   DIABETCENTRO — Equipo profesional hub (page 8701; enqueued via is_page).
   Convention: Elementor's selector + `body` prefix (see style.css header).

   Section map: 5b3442fe hero (H1 6795fe44 · intro 4e0cb116 · search 3b877f17
   [hidden, punch-list deletes] · button 5d384db · v4 e-button "Contáctanos" ·
   portrait col 6a33e21f/7a0932ff) · ef07980 intro band (H2 55760511, text
   59a82f1f) · 441a90a6 team grid (8 Qi team_member widgets — 3 EMPTY, hidden
   here until deleted in Elementor).
   ========================================================================== */

/* -- §1 HERO: boxed spruce panel with diagonal photo edge -------------------
   The homepage hero translated to the hub's DOM (text col + <img> col):
   the SECTION becomes the dark panel; the portrait absolute-fills the right
   column; a 105deg overlay paints the spruce wedge + mint hairline over the
   photo's straight edge so it reads as the diagonal cut; a skewed ::after
   sweeps off on load (first viewport = time-based). Content sits at z2.
   overflow:hidden is safe here — nothing sticky/escaped lives inside. */

body .elementor-8701 .elementor-element.elementor-element-5b3442fe {
	position: relative;
	overflow: hidden;
	background-color: var(--e-global-color-accent);
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	margin-top: 16px;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
}
/* the diagonal: spruce wedge merging into the panel ground, mint hairline
   tracing the cut, soft falloff over the photo (homepage 105deg recipe) */
@media (min-width: 768px) {
	body .elementor-8701 .elementor-element.elementor-element-5b3442fe::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(105deg,
			var(--e-global-color-accent) 0%,
			var(--e-global-color-accent) 52%,
			rgba(47, 167, 159, 0.9) 52%,
			rgba(47, 167, 159, 0.9) 52.35%,
			rgba(0, 74, 72, 0.42) 52.35%,
			rgba(0, 74, 72, 0.08) 61%,
			rgba(0, 74, 72, 0) 67%);
	}
	/* entrance: the wedge sweeps off along its own diagonal (motion-gated) */
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8701 .elementor-element.elementor-element-5b3442fe::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: -20%;
			width: 140%;
			z-index: 1;
			pointer-events: none;
			background: rgba(0, 74, 72, 0.97);
			transform: skewX(-15deg);
			animation: dc-hub-sweep 1.1s cubic-bezier(0.08, 0.82, 0.17, 1) 0.15s forwards;
		}
	}
}
@keyframes dc-hub-sweep {
	to { transform: skewX(-15deg) translateX(112%); }
}
/* content column: inset inside the panel, above the overlay */
body .elementor-8701 .elementor-element.elementor-element-590eae5 {
	position: relative;
	z-index: 2;
}
body .elementor-8701 .elementor-element.elementor-element-590eae5 > .elementor-widget-wrap {
	padding: clamp(28px, 4.5vw, 64px) clamp(20px, 3.5vw, 48px);
}

/* voices flip onto the dark ground */
body .elementor-8701 .elementor-element.elementor-element-6795fe44 .qodef-qi-animated-text::before {
	content: "Nosotros";
	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(--e-global-color-primary);
}
body .elementor-8701 .elementor-element.elementor-element-6795fe44 .qodef-m-title {
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #ffffff;
}
body .elementor-8701 .elementor-element.elementor-element-6795fe44 .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);
}
/* intro line → subhead voice, light on spruce */
body .elementor-8701 .elementor-element.elementor-element-4e0cb116 {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	max-width: 34ch;
}
/* the H1 divider's teal body reads on spruce with a mint head instead */
body .elementor-8701 .elementor-element.elementor-element-6795fe44 .qodef-m-title::after {
	background: linear-gradient(90deg,
		var(--dc-color-drop) 0 20px,
		var(--e-global-color-primary) 20px);
}
/* the search widget is a stray on a team page — hidden pending deletion
   (punch list; its JS/CSS still enqueue until the widget is removed) */
body .elementor-8701 .elementor-element.elementor-element-3b877f17 {
	display: none;
}
/* primary CTA: the widget's authored "info" blue → house teal (per-ID mirror
   outranks the widget's generated rule) */
body .elementor-8701 .elementor-element.elementor-element-5d384db .elementor-button {
	background-color: var(--e-global-color-secondary);
	color: #ffffff;
	border-radius: var(--dc-radius-btn);
	padding: 16px 32px;
}
body .elementor-8701 .elementor-element.elementor-element-5d384db .elementor-button:is(:hover, :focus) {
	background-color: var(--dc-color-spruce-deep);
}
body .elementor-8701 .elementor-element.elementor-element-5d384db {
	text-align: left; /* widget authored center — the hero is left-editorial */
}
/* the Elementor-v4 atomic e-button ("Contáctanos/pregunta") paints out of
   flow above the H1 — pin it back into the column flow as the secondary
   ghost action after the primary. It sits as a DIRECT child of the hero
   column's widget-wrap (not inside an .elementor-element wrapper). */
body .elementor-8701 .elementor-widget-wrap > .e-button-base {
	position: static;
	order: 10;
	align-self: flex-start;
	margin-top: 12px;
	display: inline-block;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.75); /* ghost-on-photo (hero is spruce now) */
	border-radius: var(--dc-radius-btn);
	padding: 13px 28px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: #ffffff;
	text-decoration: none;
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8701 .elementor-widget-wrap > .e-button-base:is(:hover, :focus) {
	background-color: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	border-color: #ffffff;
}
/* portrait: full-bleed into the panel's right half (services-photo pattern
   — the widget-wrap is a flex row, so absolute-fill is the only honest
   height), spruce seam at the joint, slow drift inside the clip */
@media (min-width: 768px) {
	/* the section carries a 40px top padding (kit) that insets BOTH columns —
	   zero it so the photo bleeds to the panel's top edge; the content column
	   keeps its own widget-wrap padding for breathing room */
	body .elementor-8701 .elementor-element.elementor-element-5b3442fe {
		padding-top: 0;
	}
	body .elementor-8701 .elementor-element.elementor-element-6a33e21f {
		position: relative;
		min-height: 500px;
	}
	body .elementor-8701 .elementor-element.elementor-element-6a33e21f > .elementor-widget-wrap {
		padding: 0;
		height: 100%;
	}
	body .elementor-8701 .elementor-element.elementor-element-7a0932ff {
		position: absolute;
		/* bleed left WELL past the diagonal (to ~42% of the panel, left of the
		   52% cut) so the photo sits under the spruce wedge + falloff with no
		   dead zone between hairline and photo — the homepage's photo-under-
		   overlay behaviour. -16% only reached ~57%, leaving a spruce triangle. */
		inset: 0 0 0 -66%;
		/* the image widget defaults to max-width:100% (= the column width), which
		   over-constrained the left+right inset and left a ~67px dead strip at the
		   panel's right edge. none → the inset defines the width, so it reaches
		   right:0 (the panel edge) and fills the whole right side. */
		width: auto;
		max-width: none;
	}
	body .elementor-8701 .elementor-element.elementor-element-7a0932ff .elementor-widget-container {
		height: 100%;
	}
	body .elementor-8701 .elementor-element.elementor-element-7a0932ff img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 42%; /* moved the framing up 20pts (was 22%) */
	}
	/* NO continuous drift here. The homepage hero image sits still (it is a CSS
	   background); the equipo portrait must read the same way. The old
	   `dc-photo-drift 18s infinite alternate` kept the photo floating up/down
	   forever, so it never "landed" inside the diagonal — the exact "doesn't
	   integrate like the home page" the client flagged. The one-time load sweep
	   (::after) stays; that mirrors the homepage hero reveal. */
}
@media (max-width: 767px) {
	/* stacked: the photo becomes the panel's base band, own rounded corners */
	body .elementor-8701 .elementor-element.elementor-element-7a0932ff img {
		display: block;
		width: 100%;
		max-height: 340px;
		object-fit: cover;
		/* the source is a 2:3 portrait rendered here at ~326x340 (near square),
		   so `center top` showed only the top ~38% of the frame and cut the
		   subject. Move the crop window 30% down the source — under `cover`
		   that reads as the image sliding UP into better framing. Same
		   reasoning as the desktop crop at §1 above. */
		object-position: center 30%;
		border-radius: var(--dc-radius-card);
	}
	body .elementor-8701 .elementor-element.elementor-element-6a33e21f > .elementor-widget-wrap {
		padding: 0 16px 16px;
	}
}

/* -- §2 INTRO BAND: the mint beat between dark hero and white grid ---------- */

body .elementor-8701 .elementor-element.elementor-element-ef07980:not(.elementor-motion-effects-element-type-background) {
	background-color: var(--e-global-color-cff305b);
	padding-top: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(28px, 4vw, 48px);
	margin-top: 32px;
}

body .elementor-8701 .elementor-element.elementor-element-55760511 .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);
}
body .elementor-8701 .elementor-element.elementor-element-59a82f1f {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	color: var(--dc-color-teal-text);
}

/* -- §3 TEAM GRID → the site card system ------------------------------------- */

/* roomy cards in a CENTERED flex row (the old 200px auto-fill made 5 thin,
   tall slivers). At ~340px they read as proper feature cards; the 5 members
   land as 3 + 2 and the orphan pair centers instead of leaving a right gap.
   No grow → uniform card widths across both rows. */
body .elementor-8701 .elementor-element.elementor-element-441a90a6 .elementor-column > .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	align-items: stretch;
}
body .elementor-8701 .elementor-element.elementor-element-441a90a6 .elementor-widget-qi_addons_for_elementor_team_member {
	--container-widget-width: 340px; /* three-knob width lock so the row wraps */
	flex: 0 1 340px;
	width: 340px;
	max-width: 100%;
	margin: 0;
}
/* the 3 empty widgets render hollow frames — hide until deleted (punch list) */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:not(:has(.qodef-m-title)) {
	display: none;
}
/* equal card heights: chain full height through Qi's wrappers so the grid
   row's stretch reaches .qodef-m-inner */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .elementor-widget-container,
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-shortcode {
	height: 100%;
}
/* card chrome (style.css §3 voice: white ground, hairline, lift on hover) */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-inner {
	position: relative; /* anchor for the full-card profile-link overlay (§ below) */
	height: 100%;
	background-color: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	overflow: hidden; /* media bleeds to the card edge */
	cursor: pointer;   /* the whole card navigates to the member profile */
	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-8701 .elementor-widget-qi_addons_for_elementor_team_member:hover .qodef-m-inner {
	border-color: var(--e-global-color-secondary);
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-soft);
}
/* uniform 4:5 portrait plate (sources arrive in four different croppings);
   Qi's own hover-scale supplies the house 1.03 zoom */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-inner {
	display: flex;
	flex-direction: column;
}
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-content {
	padding: 14px 16px 16px;
	text-align: left;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
/* the social row no longer reserves baseline space — its only surviving link
   is the profile overlay (§ card-link below); everything else is hidden */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-social-icons {
	margin: 0;
	padding: 0;
	min-height: 0;
}
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-title {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.3;
	margin: 0 0 2px;
	color: var(--e-global-color-accent);
	/* growing underline on card hover (the homepage process-row move) */
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px;
	transition: background-size var(--dc-speed) var(--dc-ease);
	padding-bottom: 2px;
}
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:hover .qodef-m-title {
	background-size: 100% 2px;
}
/* FENCED: house staggered entrance for the grid — enable by deleting this
   fence once the punch-list item "remove the authored fadeIn entrance from
   the 8 team_member widgets" lands in Elementor (until then the widgets'
   own fadeIn would double-fire with it).
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member {
			animation: dc-card-rise linear both;
			animation-timeline: view();
		}
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:nth-of-type(1) { animation-range: entry 0% entry 50%; }
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:nth-of-type(2) { animation-range: entry 10% entry 60%; }
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:nth-of-type(3) { animation-range: entry 20% entry 70%; }
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:nth-of-type(4) { animation-range: entry 30% entry 80%; }
		body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member:nth-of-type(5) { animation-range: entry 40% entry 90%; }
	}
}
END FENCE */
body .elementor-8701 .elementor-widget-qi_addons_for_elementor_team_member .qodef-m-role {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	font-size: 0.72rem;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
	margin: 0 0 10px;
}
/* WHOLE CARD → member profile (client ask: no visible icon links, the card
   itself navigates). Each Qi social row still holds the member's profile link
   as its "fa-link" icon — href = /equipo/<slug>/. Stretch THAT link across the
   whole card and drop its glyph; hide every other social (wa.link / facebook)
   and any dead placeholder. Pure CSS — works with no JS; equipo.js only adds
   the aria-label + same-tab nav. (4 of the 5 profile hrefs were #-prefixed
   dead links — the known Elementor sanitize gotcha — repaired in the DB by
   tools/equipo-links.) */
body .elementor-8701 .qodef-e-social-icon-link[href*="/equipo/"] {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: auto;
	height: auto;
	border: 0;
	background: none;
	font-size: 0; /* collapse the icon glyph box so only the hit-area remains */
}
body .elementor-8701 .qodef-e-social-icon-link[href*="/equipo/"] .qodef-e-social-icon {
	display: none;
}
/* every non-profile icon (real socials + any dead placeholder href="") — gone */
body .elementor-8701 .qodef-e-social-icon-link:not([href*="/equipo/"]) {
	display: none;
}

/* -- §4 MOBILE (<768px) ------------------------------------------------------ */

@media (max-width: 767px) {
	body .elementor-8701 .elementor-element.elementor-element-441a90a6 .elementor-column > .elementor-widget-wrap {
		gap: 14px;
	}
	/* 2-up on phones (flex now, not grid) */
	body .elementor-8701 .elementor-element.elementor-element-441a90a6 .elementor-widget-qi_addons_for_elementor_team_member {
		--container-widget-width: calc(50% - 7px);
		flex: 0 1 calc(50% - 7px);
		width: calc(50% - 7px);
	}
	body .elementor-8701 .elementor-element.elementor-element-4e0cb116 {
		max-width: none;
	}
	body .elementor-8701 .elementor-element.elementor-element-7a0932ff img {
		width: 100%;
	}
}