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

   Section map (verified 2026-07-12 from _elementor_data, after
   tools/contacto-refresh ran):
     6652f203 MASTHEAD : spruce plate (bg image dropped in DB) + Qi H1
                         "Contacto" (7025be1b).
     13070d66 CONTENT  : reverse-mobile 50/50.
       32939408 left   : Qi H2 "Envíanos un mensaje" (a9c8291) + intro text
                         (7b86d094) + WPForms 8564 (f66aeb5) + map (12e30da)
                         → ONE white card, map as its full-bleed footer.
       6291ce1b right  : h6 Visítanos + address + h6 Contacto directo +
                         icon-list (tel/mailto/WhatsApp) + horario + socials
                         → spruce info panel (var(--dc-panel-card) stacking tone), sticky
                         on desktop; WhatsApp row promoted to a mint pill.

   Beats: dark masthead ground · card-over-spruce dock straddle (homepage
   signature) · two-tone pair (white form card / spruce info panel) · gated
   entrances · chip hover physics.
   ========================================================================== */

/* ==========================================================================
   §0 Qi ANIMATED-TEXT NORMALIZATION (servicios-detail §0 recipe)
   Words render static; the §4 entrances carry the motion, gated.
   ========================================================================== */
body .elementor-8556 .qodef-m-title .qodef-e-word {
	opacity: 1;
	transform: none;
	color: inherit;
	font: inherit;
}

/* ==========================================================================
   §1 MASTHEAD — boxed spruce plate, white display H1, mint glow
   ========================================================================== */
body .elementor-8556 .elementor-element.elementor-element-6652f203:not(.elementor-motion-effects-element-type-background) {
	position: relative;
	overflow: hidden;
	/* The clinic's own waiting room under the house scrim (attachment 11278,
	   added 2026-07-20). Scrim and photo stack as two layers of ONE property —
	   the 8766 recipe — because this masthead's .elementor-background-overlay
	   is retired below, so there is no separate element to paint on.
	   The scrim is left-heavy: the eyebrow and white H1 sit on the left third,
	   and the room's own bright ceiling would eat them otherwise.
	   Root-relative URLs are load-bearing: the media plugin's passthru buffer
	   only rewrites absolute http(s) URLs, so these stay byte-identical to the
	   preload in functions.php and the two share ONE fetch. UPDATE TOGETHER. */
	background-image:
		linear-gradient(100deg,
			rgba(0, 74, 72, 0.94) 0%,
			rgba(0, 74, 72, 0.86) 34%,
			rgba(0, 109, 107, 0.55) 52%,
			rgba(0, 109, 107, 0.18) 74%,
			rgba(0, 109, 107, 0.08) 100%),
		image-set(
			url("/wp-content/uploads-webpc/uploads/2026/07/sala-de-espera-diabetcentro.jpg.webp") type("image/webp"),
			url("/wp-content/uploads/2026/07/sala-de-espera-diabetcentro.jpg") type("image/jpeg"));
	background-position: center, center 60%;
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-color: var(--e-global-color-accent); /* backstop under the photo */
	max-width: min(1200px, calc(100% - 32px));
	margin: 16px auto 0;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
	/* extra bottom room: the content section's cards dock into this plate */
	padding-block: clamp(52px, 6vw, 92px) calc(clamp(52px, 6vw, 92px) + 56px);
}
/* the old design lightened its stock photo with a background-overlay — over
   the spruce plate it just washes the ground out; off */
body .elementor-8556 .elementor-element-6652f203 > .elementor-background-overlay {
	display: none;
}
/* depth: mint glow top-right, deep-spruce vignette bottom-left. The vignette
   is doing real work now — it deepens exactly the corner the H1 sits in. The
   mint glow is halved (was 0.14) so it reads as light on the photo instead of
   haze over it. */
body .elementor-8556 .elementor-element-6652f203::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.07), transparent 50%),
		radial-gradient(70% 90% at 4% 100%, rgba(0, 74, 72, 0.55), transparent 55%);
}
body .elementor-8556 .elementor-element-6652f203 > .elementor-container {
	position: relative;
	z-index: 1;
}
/* eyebrow above the H1 — real ::before text, screen-reader announced
   (stopgap for a real h6 widget; punch-listed) */
body .elementor-8556 .elementor-element-6652f203 .elementor-widget-qi_addons_for_elementor_animated_text {
	text-align: left;
}
body .elementor-8556 .elementor-element-6652f203 .elementor-widget-qi_addons_for_elementor_animated_text::before {
	content: "ESTAMOS PARA AYUDARTE";
	display: block;
	margin-bottom: 14px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
}
body .elementor-8556 .elementor-element-6652f203 .qodef-m-title,
body .elementor-8556 .elementor-element-6652f203 .qodef-m-title * {
	color: #ffffff;
	text-align: left;
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	font-weight: 700;
}
body .elementor-8556 .elementor-element-6652f203 .qodef-m-title.qodef--alignment-center {
	text-align: left;
}

/* ==========================================================================
   §2 CONTENT SECTION — constrained box docking into the masthead
   ========================================================================== */
body .elementor-8556 .elementor-element.elementor-element-13070d66 {
	position: relative;
	z-index: 2;
	margin-top: -56px; /* cards straddle the masthead's spruce edge */
	padding-block: 0 clamp(64px, 7vw, 104px);
}
body .elementor-8556 .elementor-element-13070d66 > .elementor-container {
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	/* columns keep the default stretch — the right column must span the full
	   row height to give its sticky panel travel room */
}
/* the panel (widget-wrap) hugs content height inside the stretched column */
body .elementor-8556 .elementor-element.elementor-element-6291ce1b.elementor-column {
	align-items: flex-start;
	align-content: flex-start;
}
/* column gutters (the full_width section shipped none — content hit x=0) */
body .elementor-8556 .elementor-element.elementor-element-32939408 > .elementor-widget-wrap {
	margin-right: clamp(12px, 1.6vw, 20px);
}
body .elementor-8556 .elementor-element.elementor-element-6291ce1b > .elementor-widget-wrap {
	margin-left: clamp(12px, 1.6vw, 20px);
}
/* rebalance the authored 70/30 split — the form doesn't need 820px and the
   info panel was starved (mirrors the kit's ≥768 width rule) */
@media (min-width: 768px) {
	body .elementor-8556 .elementor-element.elementor-element-32939408 {
		width: 58.5%;
	}
	body .elementor-8556 .elementor-element.elementor-element-6291ce1b {
		width: 41.5%;
	}
}

/* ==========================================================================
   §2a LEFT — the form card (white, map as full-bleed card footer)
   ========================================================================== */
body .elementor-8556 .elementor-element.elementor-element-32939408 > .elementor-widget-wrap {
	--dc-card-pad: clamp(24px, 3.2vw, 44px);
	display: block; /* stack: heading, text, form, map */
	background: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	overflow: hidden; /* clips the map footer to the card radius */
	padding: var(--dc-card-pad) var(--dc-card-pad) 0;
}
/* card headline (Qi H2) — editorial, spruce */
body .elementor-8556 .elementor-element.elementor-element-a9c8291 .qodef-m-title,
body .elementor-8556 .elementor-element.elementor-element-a9c8291 .qodef-m-title * {
	color: var(--e-global-color-accent);
	text-align: left;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 700;
}
body .elementor-8556 .elementor-element.elementor-element-a9c8291 {
	margin-bottom: 10px;
}
body .elementor-8556 .elementor-element.elementor-element-7b86d094 {
	color: var(--dc-text-muted);
	margin-bottom: 26px;
}

/* -- WPForms: house fields inside the card --------------------------------- */
body .elementor-8556 #wpforms-8564 .wpforms-field {
	padding: 0;
	margin: 0 0 18px;
}
body .elementor-8556 #wpforms-8564 .wpforms-field-label {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--e-global-color-accent);
	margin-bottom: 7px;
}
body .elementor-8556 #wpforms-8564 .wpforms-required-label {
	color: var(--dc-color-drop);
}
body .elementor-8556 #wpforms-8564 :is(input[type="text"], input[type="email"], textarea) {
	width: 100%;
	max-width: 100%;
	background: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-btn);
	padding: 13px 16px;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--e-global-color-text, #333F46);
	box-shadow: none;
	transition: border-color var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 #wpforms-8564 :is(input[type="text"], input[type="email"], textarea):focus {
	border-color: var(--e-global-color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 109, 107, 0.15);
	outline: none;
}
body .elementor-8556 #wpforms-8564 textarea {
	min-height: 140px;
	resize: vertical;
}
/* captcha: one tidy inline row (equation · small answer box), muted hint */
body .elementor-8556 #wpforms-8564 .wpforms-field-captcha .wpforms-captcha-math {
	display: flex;
	align-items: center;
	gap: 10px;
}
body .elementor-8556 #wpforms-8564 .wpforms-captcha-equation {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--e-global-color-accent);
}
body .elementor-8556 #wpforms-8564 .wpforms-field-captcha input.a {
	width: 92px;
	flex: 0 0 auto;
}
body .elementor-8556 #wpforms-8564 .wpforms-field-description {
	font-size: 0.85rem;
	color: var(--dc-text-muted);
	margin-top: 6px;
}
/* submit: full-width primary. Explicit colors — the WPForms modern stylesheet
   feeds its own --wpforms-button-* vars at higher specificity, so the house
   §3 button rule loses here. */
body .elementor-8556 #wpforms-8564 .wpforms-submit-container {
	padding: 0;
	margin: 4px 0 0;
}
body .elementor-8556 #wpforms-8564 button.wpforms-submit,
body .elementor-8556 #wpforms-8564 button.wpforms-submit:not(:hover):not(:active) {
	width: 100%;
	background-color: var(--e-global-color-secondary);
	color: #ffffff;
	border: 0;
	border-radius: var(--dc-radius-btn);
	font-size: 1.05rem;
	font-weight: 600;
	padding: 16px 32px;
	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),
		box-shadow var(--dc-speed) var(--dc-ease),
		transform var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 #wpforms-8564 button.wpforms-submit:is(:hover, :focus) {
	background-color: var(--dc-color-spruce-deep);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--dc-shadow-lift);
}

/* -- map: full-bleed card footer ------------------------------------------- */
body .elementor-8556 .elementor-element.elementor-element-12e30da {
	margin: calc(var(--dc-card-pad) * 0.9) calc(var(--dc-card-pad) * -1) 0;
	/* the kit caps widgets at 100% of the content box — the bleed needs the
	   padding back on both sides */
	width: calc(100% + var(--dc-card-pad) * 2);
	max-width: none;
}
body .elementor-8556 .elementor-element-12e30da iframe {
	display: block;
	filter: saturate(0.92);
}

/* ==========================================================================
   §2b RIGHT — spruce info panel (sticky on desktop)
   ========================================================================== */
body .elementor-8556 .elementor-element.elementor-element-6291ce1b > .elementor-widget-wrap {
	display: block;
	background: var(--dc-panel-card); /* opaque stacking tone over the masthead spruce */
	border: 1px solid rgba(191, 227, 223, 0.16);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: clamp(26px, 3vw, 40px);
	color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 1025px) {
	body .elementor-8556 .elementor-element.elementor-element-6291ce1b > .elementor-widget-wrap {
		position: sticky;
		top: 104px; /* clears the floating header capsule */
	}
}

/* eyebrow labels (heading widgets + the business-hours title) */
body .elementor-8556 .elementor-element-6291ce1b h6.elementor-heading-title,
body .elementor-8556 .elementor-element-6291ce1b .qodef-qi-business-hours .qodef-m-title {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
	margin: 0 0 12px;
}
body .elementor-8556 .elementor-element.elementor-element-28dc8f0d,
body .elementor-8556 .elementor-element-6291ce1b .qodef-qi-business-hours .qodef-m-title {
	margin-top: 26px; /* group rhythm: Visítanos · Contacto directo · Horario */
}
body .elementor-8556 .elementor-element.elementor-element-68fe0a71 {
	color: rgba(255, 255, 255, 0.85);
}
body .elementor-8556 .elementor-element.elementor-element-68fe0a71 p {
	margin: 0 0 2px;
	line-height: 1.55;
}

/* -- contact rows: chip + text, full-row links ------------------------------ */
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-items {
	margin: 0;
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 0;
	transition: transform var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item + .elementor-icon-list-item > a {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* full kit mirror — the generated `.elementor-element.…` rule carries the
   10px icon-to-text padding at 4 classes; match it or the chip sits off-axis */
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(191, 227, 223, 0.14);
	padding: 0;
	transition: background-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-icon svg {
	width: 15px;
	height: 15px;
	fill: var(--e-global-color-primary);
	transition: fill var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-text {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.95rem;
	font-weight: 600;
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item > a:hover {
	transform: translateX(3px);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item > a:hover .elementor-icon-list-icon {
	background: var(--e-global-color-primary);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg {
	fill: var(--e-global-color-accent);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item > a:hover .elementor-icon-list-text {
	color: var(--e-global-color-primary);
}
/* the WhatsApp row IS the panel's call to action → mint pill */
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item:last-child > a {
	background: var(--e-global-color-primary);
	border-top: 0;
	border-radius: var(--dc-radius-btn);
	padding: 13px 16px;
	margin-top: 14px;
	box-shadow: 0 1px 2px rgba(0, 74, 72, 0.25);
	transition: background-color var(--dc-speed) var(--dc-ease),
		transform var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item:last-child > a .elementor-icon-list-icon {
	background: rgba(0, 109, 107, 0.12);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item:last-child > a .elementor-icon-list-icon svg {
	fill: var(--e-global-color-accent);
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item:last-child > a .elementor-icon-list-text {
	color: var(--e-global-color-accent);
	font-weight: 700;
}
body .elementor-8556 .elementor-element.elementor-element-1e4bce59 .elementor-icon-list-item:last-child > a:hover {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--dc-shadow-lift);
}

/* -- horario rows ----------------------------------------------------------- */
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-item {
	align-items: baseline;
	padding-block: 7px;
}
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-day {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	margin: 0;
}
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-line {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-hours {
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	margin: 0;
}
/* the Domingo repeater item ships an authored near-black pair — repaint;
   'Cerrado' de-emphasizes (it isn't a bookable time) */
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-item.elementor-repeater-item-1dbf532 .qodef-e-day {
	color: rgba(255, 255, 255, 0.85);
}
body .elementor-8556 .elementor-element.elementor-element-1aaf441f .qodef-e-item.elementor-repeater-item-1dbf532 .qodef-e-hours {
	color: rgba(255, 255, 255, 0.88);
}

/* -- socials: hairline circles, mint bloom ---------------------------------- */
body .elementor-8556 .elementor-element.elementor-element-6279f384 {
	margin-top: 24px;
}
/* full kit mirror — the widget's authored white fill ships as a 4-class rule */
body .elementor-8556 .elementor-element.elementor-element-6279f384 .elementor-social-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease),
		transform var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-6279f384 .elementor-social-icon svg {
	width: 16px;
	height: 16px;
	fill: #ffffff;
	transition: fill var(--dc-speed) var(--dc-ease);
}
body .elementor-8556 .elementor-element.elementor-element-6279f384 .elementor-social-icon:hover {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	transform: translateY(-2px);
}
body .elementor-8556 .elementor-element.elementor-element-6279f384 .elementor-social-icon:hover svg {
	fill: var(--e-global-color-accent);
}

/* ==========================================================================
   §3 ENTRANCES — scroll-driven, double-gated (house rule)
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-8556 .elementor-element-6652f203 .qodef-m-title {
			animation: dc-focus-in 720ms var(--dc-ease) both;
		}
		body .elementor-8556 .elementor-element.elementor-element-32939408 > .elementor-widget-wrap {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 34%;
		}
		body .elementor-8556 .elementor-element.elementor-element-6291ce1b > .elementor-widget-wrap {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 42%;
		}
	}
}

/* ==========================================================================
   §4 MOBILE (<768px)
   ========================================================================== */
@media (max-width: 767px) {
	/* no dock on mobile: the spruce panel stacks FIRST (reverse-mobile) and a
	   dark card straddling the dark masthead read as one merged slab — keep a
	   clean 12px seam instead */
	body .elementor-8556 .elementor-element.elementor-element-6652f203:not(.elementor-motion-effects-element-type-background) {
		max-width: calc(100% - 24px);
		padding-block: 44px 48px;
		/* a LEFT-heavy scrim needs horizontal room it doesn't have on a ~366px
		   plate — the photo would survive only as a sliver on the right. Same
		   recomposition 8766 uses: full-bleed room under a vertical scrim, with
		   the crop raised to 40% so the chairs and the logo door carry the
		   frame instead of the ceiling lights. */
		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/07/sala-de-espera-diabetcentro.jpg.webp") type("image/webp"),
				url("/wp-content/uploads/2026/07/sala-de-espera-diabetcentro.jpg") type("image/jpeg"));
		background-position: center, center 40%;
		background-size: cover, cover;
	}
	body .elementor-8556 .elementor-element.elementor-element-13070d66 {
		margin-top: 12px;
	}
	body .elementor-8556 .elementor-element-13070d66 > .elementor-container {
		max-width: calc(100% - 24px);
	}
	/* stacked cards: gutters off, vertical gap between panel (first) and form */
	body .elementor-8556 .elementor-element.elementor-element-32939408 > .elementor-widget-wrap {
		margin-right: 0;
		--dc-card-pad: 20px;
		padding-top: 24px;
	}
	body .elementor-8556 .elementor-element.elementor-element-6291ce1b > .elementor-widget-wrap {
		margin-left: 0;
		margin-bottom: 20px;
		padding: 24px 20px;
	}
	/* keep the editorial left voice (kit centers text on mobile) */
	body .elementor-8556 .elementor-element-13070d66 :is(h2, h6, p),
	body .elementor-8556 .qodef-m-title {
		text-align: left;
	}
}