/*
Theme Name:   Hello Elementor Child (Diabetcentro)
Description:  Child of Hello Elementor. Holds custom CSS, code-level SEO, and performance tweaks. Design lives in Elementor; SEO meta/schema handled by Rank Math.
Author:       David
Template:     hello-elementor
Version:      1.1.0
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   DIABETCENTRO VISUAL REFRESH — child-theme override layer
   --------------------------------------------------------------------------
   Convention: to beat a rule from Elementor's generated CSS, copy Elementor's
   own selector and prefix `body` (exactly one type selector stronger, at every
   breakpoint — the kit re-declares inside @media on the same selector).
   `!important` is banned except: (a) beating widget-JS inline styles,
   (b) matching a plugin's own !important. Comment every use.

   Global colors/typography are governed HERE, not in the Elementor UI.
   Editing them in Elementor Site Settings will change the editor preview
   but NOT the front end until these overrides are updated or removed.
   ========================================================================== */

/* ==========================================================================
   0. FONTS — self-hosted latin subsets (Google's css2 shipped 500 KB across
   5 files, mostly Hind's Devanagari subsets; these 5 latin files total
   55 KB). Spanish fits entirely in the latin range. Family names must match
   the kit's --e-global-typography-*-font-family values exactly.
   functions.php preloads hind-400/700 (body + display type).
   ========================================================================== */

@font-face {
	font-family: 'Hind';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/hind-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Hind';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/hind-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Hind';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/hind-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/source-sans-pro-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/source-sans-pro-700.woff2') format('woff2');
}

/* -- ekit icon font, subsetted. The plugin ships a 454 KB woff mapping
   ~1400 glyphs; the site uses 18. This ~4 KB subset + the mirrored rules
   below replace ekiticons.css wherever it's dequeued (home + Nosotros +
   Servicios clusters + aprende hub + posts — functions.php). 2026-07-20
   added: check \eaaf (the cluster's 27 benefit chips — the glyph whose
   absence from the 13-glyph subset forced the cluster to keep the full
   454 KB woff), technology-1 \e9ad + Physiotherapy \ebd6 (hub cards; icon
   names are CASE-SENSITIVE — sweep with [A-Za-z0-9_-]), chevron-left/right
   \e875/\e876 (the aprende pagination's latent need). An icon added later
   in Elementor needs its codepoint appended here and the subset regenerated:
   python3 -m fontTools.subset <plugin>/elementskit.woff \
     --unicodes=e840,e875,e876,e931,e94a,e980,e981,e982,e9a5,e9ad,e9c5,eaaf,ead6,ead7,ead8,eb46,eb70,ebd6 \
     --flavor=woff2 --output-file=assets/fonts/ekiticons-subset.woff2 */
@font-face {
	font-family: elementskit;
	font-style: normal;
	font-weight: 400;
	font-display: block; /* 2 KB — avoid a tofu flash on icons */
	src: url('assets/fonts/ekiticons-subset.woff2') format('woff2');
}
body .icon::before {
	/* !important mirrors the plugin's own rule (documented exception b) */
	font-family: elementskit !important;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body .icon.icon-whatsapp-1::before { content: "\eb46"; }
body .icon.icon-right-arrow::before { content: "\e9c5"; }
body .icon.icon-left-arrow::before { content: "\e94a"; }
body .icon.icon-medicine::before { content: "\ead7"; }
body .icon.icon-heart::before { content: "\ead6"; }
body .icon.icon-protected-content::before { content: "\e931"; }
body .icon.icon-plus::before { content: "\e982"; }
body .icon.icon-minus::before { content: "\e981"; }
body .icon.icon-play-button::before { content: "\e980"; }
body .icon.icon-heart-pulse::before { content: "\e840"; }
body .icon.icon-cancel::before { content: "\e9a5"; }
body .icon.icon-whatsapp-2::before { content: "\eb70"; }  /* equipo hub card */
body .icon.icon-stethoscope::before { content: "\ead8"; } /* nosotros posts */
body .icon.icon-check::before { content: "\eaaf"; }        /* cluster benefit chips */
body .icon.icon-technology-1::before { content: "\e9ad"; } /* servicios hub card */
body .icon.icon-chevron-left::before { content: "\e875"; } /* aprende pagination */
body .icon.icon-chevron-right::before { content: "\e876"; }
body .icon.icon-Physiotherapy::before { content: "\ebd6"; } /* hub renal card — note the capital P */

/* -- DethemeKit icon font, subsetted. The plugin's dticon.css @font-faces a
   151 KB ttf for TWO glyphs site-wide (fitness-outline on the servicios hub,
   add-outline on elige — swept 2026-07-20). This 644 B subset + the mirror
   below replace it where functions.php dequeues elementor-icons-dticon.
   A dticon added later in Elementor needs its codepoint here and:
   python3 -m fontTools.subset <plugin>/modules/controls/assets/fonts/dticon.ttf \
     --unicodes=e901,e99c --flavor=woff2 \
     --output-file=assets/fonts/dticon-subset.woff2 */
@font-face {
	font-family: 'dticon';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('assets/fonts/dticon-subset.woff2') format('woff2');
}
[class^="dticon-"],
[class*=" dticon-"] {
	/* !important mirrors the plugin's own rule (documented exception b) */
	font-family: 'dticon' !important;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dticon-fitness-outline::before { content: "\e99c"; } /* servicios hub card */
.dticon-add-outline::before { content: "\e901"; }     /* elige landing */

/* ==========================================================================
   1. TOKENS — official Diabetcentro brand palette (PALETA DE COLORES)
   verde petróleo #006D6B · teal medio #2FA79F · teal claro #BFE3DF ·
   gris azulado #333F46 · gris claro #E6ECEF · blanco #FFFFFF · rojo #D94B4B.
   Tonal architecture: light wash / bright accent / deep petróleo anchor.
   ========================================================================== */

body.elementor-kit-18 {
	/* -- Elementor global colors (rotated to brand) ---------------------- */
	--e-global-color-primary: #BFE3DF;   /* teal claro — washes, chips, underline base */
	--e-global-color-secondary: #006D6B; /* verde petróleo — AA teal for actions/glyphs */
	--e-global-color-accent: #006D6B;    /* verde petróleo — dark panels + display type */
	--e-global-color-text: #333F46;      /* gris azulado — body text (was kit #1B1B1B) */
	--e-global-color-cff305b: #E6ECEF;   /* gris claro — neutral section background */
	--e-global-color-d59e8a8: #D3DBDF;   /* cool-gray hairline (was #CECECE) */

	/* -- child-theme tokens (dc- prefix = Diabetcentro) ------------------ */
	--dc-color-drop: #D94B4B;        /* rojo of the logo drop — micro-accent only */
	--dc-color-teal-text: #006D6B;   /* verde petróleo for small teal text on light (AA) */
	--dc-color-teal-bright: #2FA79F; /* teal medio — bright accent: gradient stops, glows */
	--dc-color-spruce-deep: #004A48; /* deepest petróleo — hero scrim / button-hover ground */
	--dc-text-muted: #5A666B;        /* muted gris azulado — captions / meta text */
	--dc-panel-card: #0A5C59;        /* opaque card ground stacked on a petróleo panel */
	--dc-drop-deep: #B23A3A;         /* AA-safe rojo for the rare red-text case */
	--dc-radius-btn: 10px;
	--dc-radius-btn-hover: 12px; /* +20% — buttons round OUT as they grow on hover */
	--dc-radius-card: 16px;
	--dc-radius-media: 24px;
	--dc-border: 1px solid var(--e-global-color-d59e8a8);
	--dc-shadow-soft: 0 1px 2px rgba(0, 54, 52, 0.06), 0 8px 24px -8px rgba(0, 54, 52, 0.14);
	--dc-shadow-lift: 0 2px 4px rgba(0, 54, 52, 0.08), 0 16px 32px -12px rgba(0, 54, 52, 0.2);
	--dc-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--dc-speed: 180ms;
}

/* ==========================================================================
   2. BASE — fluid type scale & foundations
   The kit sets heading sizes twice: hard px on `.elementor-kit-18 h1–h6`
   element rules AND via --e-global-typography-* vars consumed by widgets
   (a4b2642 = section H2s ×9, secondary = subtitles ×3, text = body copy).
   Both paths are overridden here. Line-height/letter-spacing vars are fixed
   px in the kit — every size override ships its paired line-height,
   unitless. clamp() interpolates 375→1280px viewports and replaces the
   kit's 767/1024 breakpoint stepping (intentional: fluid, no jumps).
   ========================================================================== */

body.elementor-kit-18 {
	/* -- private fluid scale ---------------------------------------------- */
	--dc-fs-h1: clamp(2.5rem, 1.88rem + 2.65vw, 4rem);        /* 40 → 64px */
	--dc-fs-h2: clamp(2rem, 1.53rem + 1.99vw, 3.125rem);      /* 32 → 50px */
	--dc-fs-h3: clamp(1.625rem, 1.16rem + 1.99vw, 2.75rem);   /* 26 → 44px */
	--dc-fs-h4: clamp(1.375rem, 1.12rem + 1.1vw, 2rem);       /* 22 → 32px */
	--dc-fs-h5: clamp(1.1875rem, 1.06rem + 0.55vw, 1.5rem);   /* 19 → 24px */
	--dc-fs-eyebrow: clamp(0.875rem, 0.82rem + 0.22vw, 1rem); /* 14 → 16px */
	--dc-fs-subtitle: clamp(1.125rem, 1.02rem + 0.44vw, 1.375rem); /* 18 → 22px */
	--dc-fs-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);    /* 16 → 18px */

	/* -- feed the Elementor typography vars the widgets consume ----------- */
	--e-global-typography-primary-font-size: var(--dc-fs-h1);
	--e-global-typography-primary-line-height: 1.1;
	--e-global-typography-a4b2642-font-size: var(--dc-fs-h2);      /* section H2s */
	--e-global-typography-a4b2642-line-height: 1.2;
	--e-global-typography-secondary-font-size: var(--dc-fs-subtitle);
	--e-global-typography-secondary-line-height: 1.45;
	--e-global-typography-secondary-letter-spacing: 0.25px;        /* was 1px */
	--e-global-typography-text-font-size: var(--dc-fs-body);
	--e-global-typography-text-line-height: 1.55;
	--e-global-typography-accent-font-size: var(--dc-fs-eyebrow);
	--e-global-typography-accent-line-height: 1.3;
	--e-global-typography-b84fc50-font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
	--e-global-typography-b84fc50-line-height: 1.2;                /* buttons; was 1.0 */

	/* -- body copy (the kit hardcodes 18px/26px on this same element) ----- */
	font-size: var(--dc-fs-body);
	line-height: 1.55;
	letter-spacing: 0.01em;
}

/* Kit element rules use hard px, not vars — override directly. */
body.elementor-kit-18 h1 { font-size: var(--dc-fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
body.elementor-kit-18 h2 { font-size: var(--dc-fs-h2); line-height: 1.2; letter-spacing: -0.01em; }
body.elementor-kit-18 h3 { font-size: var(--dc-fs-h3); line-height: 1.25; letter-spacing: 0; }
body.elementor-kit-18 h4 { font-size: var(--dc-fs-h4); line-height: 1.3; letter-spacing: 0; }
body.elementor-kit-18 h5 { font-size: var(--dc-fs-h5); line-height: 1.35; letter-spacing: 0.01em; }
body.elementor-kit-18 h6 {
	font-size: var(--dc-fs-eyebrow);
	line-height: 1.3;
	letter-spacing: 0.08em; /* eyebrows: wider tracking, smaller size = modern */
	color: var(--dc-color-teal-text);
}

/* Links: kit hover color was --e-global-color-primary (a light wash —
   near-invisible on white after the mint rotation). Re-point to teal. */
body.elementor-kit-18 a {
	transition: color var(--dc-speed) var(--dc-ease), text-decoration-color var(--dc-speed) var(--dc-ease);
}
body.elementor-kit-18 a:hover {
	color: var(--dc-color-teal-text);
}

/* Visible keyboard focus everywhere (the kit defines none). :where() keeps
   specificity low so component layers can restyle without escalation. */
body.elementor-kit-18 :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}

::selection { background: var(--e-global-color-primary); color: var(--e-global-color-accent); }

/* ==========================================================================
   3. COMPONENTS — buttons, Qi cards/FAQ/process/blog, icon lists, forms
   Site-wide by class; per-section tuning lives in assets/css/home.css.
   ========================================================================== */

/* -- Buttons: teal fill, soft radius, honest shadow ----------------------- */
body.elementor-kit-18 :is(button, input[type="button"], input[type="submit"], .elementor-button) {
	background-color: var(--e-global-color-secondary);
	color: #ffffff;
	fill: currentColor;
	border-radius: var(--dc-radius-btn);
	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),
		border-radius var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease);
}
/* Hover = grow + round OUT. The border-radius here is not cosmetic-only: the
   kit ships `.elementor-kit-18 .elementor-button:hover{border-radius:0}`, so
   without re-declaring it every button snapped to square corners on hover. */
body.elementor-kit-18 :is(button, input[type="button"], input[type="submit"], .elementor-button):is(:hover, :focus) {
	background-color: var(--dc-color-spruce-deep);
	color: #ffffff;
	border-radius: var(--dc-radius-btn-hover);
	transform: translateY(-1px) scale(1.03);
	box-shadow: var(--dc-shadow-lift);
}

/* -- Qi info cards (services): icon chip + arrow link --------------------- */
body .qodef-qi-info-cards .qodef-m-icon-holder {
	color: var(--dc-color-teal-text);
}
body .qodef-qi-info-cards .qodef-m-title {
	letter-spacing: 0;
}
body .qodef-qi-info-cards .qodef-m-button .qodef-qi-button {
	color: var(--dc-color-teal-text);
	font-weight: 600;
}
body .qodef-qi-info-cards .qodef-m-button .qodef-qi-button:hover {
	color: var(--e-global-color-accent);
}

/* -- Qi FAQ accordion: card per item, mint open state, +/- accents -------- */
body .qodef-qi-faq .qodef-e-title-holder {
	border: var(--dc-border);
	border-radius: 12px;
	background: #ffffff;
	padding: 16px 20px;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .qodef-qi-faq .qodef-e-title-holder:hover {
	border-color: var(--e-global-color-secondary);
}
body .qodef-qi-faq .qodef-e.qodef--active .qodef-e-title-holder {
	background: var(--e-global-color-cff305b);
	border-color: var(--e-global-color-primary);
	border-radius: 12px 12px 0 0;
}
body .qodef-qi-faq .qodef-e-mark .qodef-icon--plus { color: var(--e-global-color-secondary); }
body .qodef-qi-faq .qodef-e-mark .qodef-icon--minus { color: var(--dc-color-drop); }
body .qodef-qi-faq .qodef-e-content-inner {
	border: var(--dc-border);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--e-global-color-cff305b);
	padding: 16px 20px;
}

/* -- Qi process steps: teal number chips, mint connector line ------------- */
body .qodef-qi-process .qodef-e-icon-holder {
	color: var(--e-global-color-secondary);
}
body .qodef-qi-process .qodef-e-line-inner {
	background-color: var(--e-global-color-primary);
}

/* -- Qi blog list → the site card system (home strip + blog archive).
   White card, mint-gray hairline, 16px radius, media top at a uniform 3:2,
   hover = lift + teal hairline + gentle zoom — the same card voice as the
   dudas accordion and info strip. The homepage is the reference
   implementation of this language for the rest of the site. ---------------- */
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	overflow: hidden; /* media bleeds to the card edge */
	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 .qodef-addons-blog-list .qodef-blog-item:hover .qodef-e-inner {
	border-color: var(--e-global-color-secondary);
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-soft);
}
/* media: uniform 3:2 plate, cover-cropped (sources arrive in mixed sizes) */
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-media-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 0; /* the card clips — no inner radius */
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-media-image a {
	display: block;
	height: 100%;
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-media-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms var(--dc-ease);
}
body .qodef-addons-blog-list .qodef-blog-item:hover .qodef-e-media-image img {
	transform: scale(1.03);
}
/* posts without a featured image get a brand plate instead of a hole */
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-media:not(:has(img))::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	background-color: var(--e-global-color-accent);
	background-image:
		radial-gradient(circle at 78% 24%, rgba(191, 227, 223, 0.38), transparent 52%),
		radial-gradient(circle at 18% 88%, rgba(47, 167, 159, 0.42), transparent 55%),
		linear-gradient(135deg, var(--e-global-color-accent) 0%, var(--dc-color-teal-bright) 100%);
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-content {
	padding: 18px 20px 22px;
	flex-grow: 1;
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-title {
	margin: 0;
	font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	line-height: 1.35;
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-title a {
	transition: color var(--dc-speed) var(--dc-ease);
}
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-title a:hover {
	color: var(--dc-color-teal-text);
}
/* meta row: quiet accent voice (the placeholder "Uncategorized" term was
   deleted by the nosotros-pages runbook, 2026-07 — no hide needed) */
body .qodef-addons-blog-list .qodef-blog-item .qodef-e-info.qodef-info--top {
	margin-bottom: 8px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 13px;
	color: var(--dc-color-teal-text);
}

/* -- Qi testimonials slider (used for destacados/FAQ highlights) ---------- */
body .qodef-qi-testimonials-slider .qodef-e-quote-icon {
	color: var(--e-global-color-primary);
}
body .qodef-qi-testimonials-slider .qodef-e-media-image img {
	border-radius: var(--dc-radius-card);
}

/* -- Icon lists: brand-teal markers --------------------------------------- */
body.elementor-kit-18 .elementor-icon-list-icon :is(svg, i) {
	color: var(--e-global-color-secondary);
	fill: var(--e-global-color-secondary);
}

/* -- Elementor v4 atomic e-buttons: house voice SITE-WIDE ------------------
   They render as direct children of .elementor-widget-wrap (legacy columns)
   OR of an atomic .e-con container (v4 top-level flexbox button rows —
   neuropatía/consulta/servicios pairs lived outside any widget-wrap and
   rendered kit-blue until the .e-con arm landed). Instance classes are
   e-XXXX-YYYY. First = primary teal, any later sibling = ghost. Page modules
   may override per surface (the equipo hub restyles them ghost-on-spruce at
   higher specificity). */
body :is(.elementor-widget-wrap, .e-con) > .e-button-base {
	position: static;
	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),
		transform var(--dc-speed) var(--dc-ease),
		border-radius var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
/* same grow + round-out as the §3 house button; the ghost sibling below
   inherits both from this rule and only re-voices its colors */
body :is(.elementor-widget-wrap, .e-con) > .e-button-base:is(:hover, :focus) {
	background: var(--dc-color-spruce-deep);
	border-color: var(--e-global-color-accent);
	color: #ffffff;
	border-radius: var(--dc-radius-btn-hover);
	transform: translateY(-1px) scale(1.03);
	box-shadow: var(--dc-shadow-lift);
}
body :is(.elementor-widget-wrap, .e-con) > .e-button-base ~ .e-button-base {
	background: transparent;
	color: var(--dc-color-teal-text);
	box-shadow: none;
}
body :is(.elementor-widget-wrap, .e-con) > .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);
}

/* Button ROWS (atomic flexbox containers holding e-buttons): editorial
   left-alignment regardless of authored justify, aligned to the house
   1200px content box (they render full-bleed by default); stack full-width
   <768. :has()-gated — no-support browsers keep the stock row. */
body .e-con.e-flexbox-base:has(> .e-button-base) {
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	margin-block-end: 48px;
	padding-inline: 0;
}
@media (max-width: 767px) {
	body .e-con.e-flexbox-base:has(> .e-button-base) {
		flex-direction: column;
		align-items: stretch;
	}
	body .e-con.e-flexbox-base > .e-button-base {
		text-align: center;
	}
}

/* -- .dc-cta-panel: the closing dark beat as a REUSABLE HOOK ---------------
   Add the class to any Elementor section/container (Advanced → CSS Classes)
   and it becomes the house final-CTA panel — spruce ground, radius 24,
   white voices, mint links. Punch list uses it for the member/hub closing
   sections; future pages get it for free. */
body .dc-cta-panel {
	background-color: var(--e-global-color-accent);
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-soft);
	padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 48px);
	color: rgba(255, 255, 255, 0.85);
}
body .dc-cta-panel :is(h1, h2, h3, h4, h5, .qodef-m-title, .elementor-heading-title) {
	color: #ffffff;
}
body .dc-cta-panel h6,
body .dc-cta-panel h6.elementor-heading-title {
	color: var(--e-global-color-primary);
}
body .dc-cta-panel a:not(.elementor-button):not(.e-button-base) {
	color: var(--e-global-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body .dc-cta-panel a:not(.elementor-button):not(.e-button-base):hover {
	color: #ffffff;
}

/* -- Font consolidation re-points (Inter/Roboto no longer load) ----------- */
/* kit set labels in Inter; use the body family (Hind) */
body.elementor-kit-18 label {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}

/* -- Forms: soft fields, teal focus (contacto page, footer forms) ---------- */
body.elementor-kit-18 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select) {
	border: var(--dc-border);
	border-radius: var(--dc-radius-btn);
	background: #ffffff;
	padding: 12px 16px;
	transition: border-color var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease);
}
body.elementor-kit-18 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select):focus {
	border-color: var(--e-global-color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 109, 107, 0.15);
	outline: none;
}

/* ==========================================================================
   4. HEADER (template 8546) — glassy bar that condenses into a floating
   capsule as the page scrolls (floating-navbar inspiration, CSS-only).
   NOTE: the template's sticky_effects_offset is 0, so Elementor Pro puts
   .elementor-sticky--active AND --effects on the container from page load
   (verified in live DOM) — the classes carry no scroll state. The morph is
   driven by animation-timeline: scroll() instead; keyframed values outrank
   Elementor sticky's inline width/top (cascade: animations > inline styles),
   so no !important is needed.
   ========================================================================== */

/* -- base bar, every viewport: white glass, hairline base ------------------ */
body .elementor-8546 .elementor-element.elementor-element-678a9701:not(.elementor-motion-effects-element-type-background) {
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: var(--dc-border);
	box-shadow: 0 1px 2px rgba(0, 54, 52, 0.05);
}
@supports not (backdrop-filter: blur(1px)) {
	body .elementor-8546 .elementor-element.elementor-element-678a9701:not(.elementor-motion-effects-element-type-background) {
		background-color: #ffffff; /* solid fallback where blur is unsupported */
	}
}

/* -- scroll-morph: full-width bar → floating capsule over the first 160px of
   scroll. Desktop only (the burger layout below 1025px keeps the plain bar);
   scrubbed, so it tracks the scroll position in both directions. ----------- */
@supports (animation-timeline: scroll()) {
	@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
		body .elementor-8546 .elementor-element.elementor-element-678a9701.elementor-sticky--active {
			/* inline style sets only `top` — left/right/margin are free, and
			   they center the capsule once the keyframe narrows its width */
			left: 0;
			right: 0;
			margin-inline: auto;
			animation: dc-nav-capsule linear both;
			animation-timeline: scroll();
			animation-range: 0px 160px;
		}
		body .elementor-8546 .elementor-element.elementor-element-5e05c333 img {
			animation: dc-logo-compact linear both;
			animation-timeline: scroll();
			animation-range: 0px 160px;
		}
		/* the capsule is narrower than the bar — the socials cede their width
		   so nav + cita pill hold one row (they return on scroll-up; the
		   footer carries them site-wide) */
		body .elementor-8546 .elementor-element.elementor-element-678a9701.elementor-sticky--active .elementor-element.elementor-element-4c8fcc24 {
			overflow: hidden;
			/* cap the cross-axis + stop flex-stretch: as the width clips to 0
			   the four icons restack vertically (160px), which ballooned the
			   capsule height — pin it to one row instead */
			align-self: center;
			max-height: 44px;
			animation: dc-nav-socials-out linear both;
			animation-timeline: scroll();
			animation-range: 0px 160px;
		}
	}
}
@keyframes dc-nav-socials-out {
	from { max-width: 220px; }
	to   { max-width: 0; opacity: 0; margin: 0; }
}
@keyframes dc-nav-capsule {
	to {
		top: 12px;
		width: min(1160px, 100% - 40px);
		/* height stays the kit's resting 10vh — only width/corners/shadow morph
		   (the socials cap above stops the collapse from ballooning it) */
		padding: 0 28px;
		border-width: 1px; /* kit base is 0 0 1px 0 — sides fade in */
		border-color: var(--e-global-color-d59e8a8);
		border-radius: var(--dc-radius-card);
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: var(--dc-shadow-soft);
	}
}
@keyframes dc-logo-compact {
	to { height: 48px; } /* kit fixes it at 60px; object-fit keeps proportion */
}

/* The logo PNG ships a baked-in white background — invisible on the white
   bar, but a hard-edged white box on the glass capsule. Round it into a
   deliberate white chip (mark-on-card), stated explicitly so the look
   survives a future transparent-PNG swap. */
body .elementor-8546 .elementor-element.elementor-element-5e05c333 img {
	background-color: #ffffff;
	border-radius: var(--dc-radius-btn);
}

/* -- social icons: official-color squares → quiet brand circles that bloom
   the network's own color on hover/focus (the "showcase on intent" pattern;
   same circular-button language as the slider nav). ::before carries the
   network fill so all four — including Instagram's gradient — fade in
   uniformly. --------------------------------------------------------------- */
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icons-wrapper {
	gap: 8px;
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon {
	position: relative;
	overflow: hidden; /* keeps the ::before fill inside the circle */
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent; /* beats Elementor's per-network fills */
	border: 1px solid var(--e-global-color-d59e8a8);
	border-radius: 50%;
	font-size: 17px; /* glyph scale (svg is 1em) — was 25px official squares */
	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-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--dc-speed) var(--dc-ease);
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon-facebook-f::before { background: #1877F2; }
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon-instagram::before {
	background: radial-gradient(circle at 30% 107%,
		#FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon-whatsapp::before { background: #25D366; }
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon-waze::before { background: #33CCFF; }
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon svg {
	position: relative; /* above the ::before fill layer */
	height: 1em;
	width: 1em;
	fill: var(--dc-color-teal-text);
	transition: fill var(--dc-speed) var(--dc-ease);
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon:is(:hover, :focus-visible) {
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--dc-shadow-soft);
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon:is(:hover, :focus-visible)::before {
	opacity: 1;
}
body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon:is(:hover, :focus-visible) svg {
	fill: #ffffff;
}

/* -- <768px: compact single-row bar — logo · socials · burger --------------
   The kit's --flex-wrap-mobile:wrap stacked the bar into two rows (~101px of
   chrome): logo+burger on top, socials dangling below. Everything shrinks to
   fit one ~64px row instead. */
@media (max-width: 767px) {
	body .elementor-8546 .elementor-element.elementor-element-678a9701 {
		flex-wrap: nowrap;
		padding: 0 14px;
		gap: 10px;
	}
	body .elementor-8546 .elementor-element.elementor-element-5e05c333 {
		width: auto;
		max-width: none;
	}
	body .elementor-8546 .elementor-element.elementor-element-5e05c333 img {
		width: auto;
		height: 44px;
	}
	/* burger reads as the row's terminal — socials sit between logo and it */
	body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 { order: 2; }
	body .elementor-8546 .elementor-element.elementor-element-151a407c { order: 3; width: auto; }
	body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icons-wrapper {
		gap: 6px;
	}
	body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 .elementor-social-icon {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}

/* -- Header cita button (dcb85001, inserted by tools/header-cta) ------------
   Compact pill between nav and socials; the sticky header keeps the cita
   action visible from first paint on every page. On mobile it REPLACES the
   social circles (they live in the footer now — user-confirmed). */
body .elementor-8546 .elementor-element.elementor-element-dcb85001 .elementor-button {
	padding: 10px 20px;
	font-size: 0.9rem;
	white-space: nowrap;
}
/* the authored 5% flex gap (72px at 1440!) has no room left with the pill —
   tighten so the five children hold one row */
body .elementor-8546 .elementor-element.elementor-element-678a9701:not(.elementor-motion-effects-element-type-background) {
	gap: clamp(10px, 1.4vw, 22px);
}
/* 768–1200: the socials cede their space to the pill (they live in the
   footer); nav collapses to the burger below 1025 anyway */
@media (min-width: 768px) and (max-width: 1200px) {
	body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 {
		display: none;
	}
}
@media (max-width: 767px) {
	body .elementor-8546 .elementor-element.elementor-element-4c8fcc24 {
		display: none; /* socials → footer; the cita pill takes the slot */
	}
	body .elementor-8546 .elementor-element.elementor-element-dcb85001 {
		order: 2;
		width: auto;
	}
	body .elementor-8546 .elementor-element.elementor-element-dcb85001 .elementor-button {
		padding: 9px 14px;
		font-size: 0.82rem;
	}
}

/* Nav items were Roboto (no longer loaded) — use the accent family (SSP) */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu .elementor-item {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
}

/* Nav: black hover/active underline → brand teal; teal hover color */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after,
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after {
	background-color: var(--e-global-color-secondary);
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-item:hover,
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--dc-color-teal-text);
}

/* Dropdowns: one WP menu renders twice — desktop hover panels (ul.sub-menu
   .elementor-nav-menu--dropdown inside nav.--main) and the ≤1024px toggle menu
   (nav.elementor-nav-menu--dropdown, a separate container). Kit cream/black →
   brand panels. Shared item state first, then per-surface panels. */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--dropdown a.elementor-sub-item {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--dropdown a.highlighted,
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--dropdown a.elementor-item-active,
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--dropdown a:hover {
	background-color: var(--e-global-color-cff305b);
	color: var(--dc-color-teal-text);
}

/* Desktop panels: glass card echoing the header capsule; items as pills */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown {
	background-color: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border: var(--dc-border);
	border-radius: 14px;
	box-shadow: var(--dc-shadow-lift);
	padding: 6px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown {
		background-color: #ffffff;
	}
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown li:not(:last-child) {
	border-bottom-width: 0; /* kit draws 1px black dividers — pills don't want them */
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item {
	border-radius: 8px;
	padding: 10px 14px;
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted {
	box-shadow: inset 3px 0 0 var(--e-global-color-secondary);
}

/* Servicios: 8 items read as a 2×4 panel. column-count, NOT grid — SmartMenus
   drives the ul's inline display for open/close, so display can't be ours. */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main li.dc-menu-servicios > ul.sub-menu {
	column-count: 2;
	column-gap: 4px;
	min-width: 460px !important; /* !important: SmartMenus inlines min-width (subMenusMinWidth) on open */
	max-width: 480px !important; /* !important: SmartMenus inlines max-width (subMenusMaxWidth) on open */
}
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-nav-menu--main li.dc-menu-servicios > ul.sub-menu > li {
	break-inside: avoid;
}

/* ≤1024px toggle menu: white card, sub-items indented behind a mint rail */
body .elementor-8546 .elementor-element.elementor-element-151a407c nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	background-color: #ffffff;
	border: var(--dc-border);
	border-radius: 12px;
	box-shadow: var(--dc-shadow-lift);
	margin-top: 8px;
	/* NO `overflow` declaration here. The plugin's own base rule is
	   `.elementor-nav-menu--dropdown.elementor-nav-menu__container{overflow:hidden auto}`
	   — i.e. it already scrolls vertically. Our `overflow:hidden` shorthanded
	   BOTH axes at higher specificity and killed that: with Nosotros ▸ Equipo
	   profesional expanded, content ran past the fold with no way to reach it
	   (measured 2026-07-19, scrollHeight 890px in a 770px panel). The closed
	   state keeps its own `overflow:hidden` from the plugin's
	   `:not(.elementor-active) +` rule, and `overflow-y:auto` still clips to
	   the radius, so the card look is unchanged.

	   Deliberately NOT overriding max-height either: the plugin's open rule is
	   `max-height: var(--menu-height)` and Elementor's JS computes that
	   correctly as viewport − panel top (769.8px on a 844px screen). Wrapping
	   it in a min() is a trap — --menu-height was observed resolving to a
	   UNITLESS `0`, which makes min(0, <length>) invalid and drops the whole
	   declaration. */
}
/* keep an over-scroll at the panel edge from chaining to the page behind it */
body .elementor-8546 .elementor-element.elementor-element-151a407c .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
body .elementor-8546 .elementor-element.elementor-element-151a407c nav.elementor-nav-menu__container.elementor-nav-menu--dropdown li:not(:last-child) {
	border-color: var(--e-global-color-d59e8a8); /* kit's black hairlines → mint */
}
body .elementor-8546 .elementor-element.elementor-element-151a407c nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu {
	background-color: transparent; /* kit cream panel — the rail marks nesting instead */
	border-width: 0;               /* kit's 1px black bottom border */
}
/* Sub-item type scale. The kit only sizes depth 0 (.elementor-item, 16px), so
   sub-items fell through to the plugin defaults — .elementor-nav-menu--dropdown
   13px × .elementor-sub-item .85em = 11.05px at BOTH depths (measured
   2026-07-19). A 45% cliff off the parent with no intermediate step. Grade it
   instead: 16 → 15 → 14. Rows also lose 6px of the kit's 20px vertical padding
   at each sub level — bigger type in tighter rows is a net height saving, which
   is what lets the deepest submenu fit. */
body .elementor-8546 .elementor-element.elementor-element-151a407c nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item {
	padding-left: 28px;
	padding-block: 14px;
	font-size: 15px;
	font-weight: 500;
	box-shadow: inset 3px 0 0 var(--e-global-color-d59e8a8);
}
body .elementor-8546 .elementor-element.elementor-element-151a407c nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a.elementor-sub-item {
	padding-left: 44px; /* level 3 (equipo fly-out) steps in once more */
	font-size: 14px;
}

/* ==========================================================================
   5. UTILITIES / MOTION — keep transitions honest for everyone
   ========================================================================== */

/* House entrance keyframes — shared by every per-page module (home, equipo,
   nosotros posts, …). Page files reference these names; page-SPECIFIC
   keyframes stay in their page file. */
@keyframes dc-card-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dc-focus-in {
	from { opacity: 0; filter: blur(10px); }
	to   { opacity: 1; filter: blur(0); }
}
@keyframes dc-float-far {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, 7px, 0); }
}
@keyframes dc-float-near {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -10px, 0) rotate(-0.5deg); }
}
@keyframes dc-photo-drift {
	from { transform: translateY(-3.5%) scale(1.1); }
	to   { transform: translateY(3.5%) scale(1.1); }
}
@keyframes dc-parallax-far {
	from { transform: translateY(-2.5%); }
	to   { transform: translateY(2.5%); }
}
@keyframes dc-parallax-near {
	from { transform: translateY(4%); }
	to   { transform: translateY(-4%); }
}

@media (prefers-reduced-motion: reduce) {
	body.elementor-kit-18 *,
	body.elementor-kit-18 *::before,
	body.elementor-kit-18 *::after {
		transition-duration: 0.01ms !important; /* !important: must beat widget inline/transition rules under reduced motion */
		animation-duration: 0.01ms !important;  /* !important: same reduced-motion guarantee */
		animation-iteration-count: 1 !important; /* !important: same reduced-motion guarantee */
	}
}

/* ==========================================================================
   §6 FOOTER — Elementor Pro footer template (created by tools/footer-2026/;
   the dcf0xxxx element ids are pre-chosen there and safe to key on).
   Spruce grounding base: boxed 4-zone grid over a full-bleed accent ground,
   spruce-deep legal bar. Contact data MIRRORS the org schema node in
   functions.php — UPDATE TOGETHER.
   ========================================================================== */

body .elementor-location-footer {
	background-color: var(--e-global-color-accent);
	color: rgba(255, 255, 255, 0.88);
}

/* main grid: the four zone containers become grid items */
body .elementor-location-footer .elementor-element.elementor-element-dcf00001 {
	display: grid;
	grid-template-columns: 1.35fr 1fr 0.75fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px);
	align-items: start;
}
body .elementor-location-footer .elementor-element.elementor-element-dcf00001 > .e-con {
	width: auto;
	max-width: none;
	padding: 0;
}

/* zone labels: the house eyebrow voice, mint on spruce */
body .elementor-location-footer :is(.elementor-element-dcf00007, .elementor-element-dcf0000a) .elementor-heading-title {
	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(--e-global-color-primary);
	margin-bottom: 14px;
}

/* brand: white-inverted wordmark (the source PNG has real alpha; the inset
   clips a 1px frame baked into the file) + measure */
body .elementor-location-footer .elementor-element.elementor-element-dcf00003 img {
	max-width: 190px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.95;
	clip-path: inset(3px);
}
body .elementor-location-footer .elementor-element.elementor-element-dcf00004 p {
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 14px 0 18px;
}

/* social chips: quiet glass circles, teal bloom on hover */
body .elementor-location-footer .elementor-element-dcf00005 .elementor-social-icon {
	width: 38px;
	height: 38px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-location-footer .elementor-element-dcf00005 .elementor-social-icon svg {
	fill: #ffffff;
	width: 15px;
	height: 15px;
}
body .elementor-location-footer .elementor-element-dcf00005 .elementor-social-icon:hover {
	background-color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
}

/* contact rows: mint glyphs, light values (overrides the §3 teal marker) */
body .elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-item {
	margin-bottom: 10px;
}
body .elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-icon :is(svg, i) {
	color: var(--e-global-color-primary);
	fill: var(--e-global-color-primary);
	width: 15px;
	height: 15px;
}
body .elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-location-footer .elementor-widget-icon-list a:hover .elementor-icon-list-text {
	color: var(--e-global-color-primary);
}

/* enlaces: text-only rows (Elementor icon-lists default to a check glyph) */
body .elementor-location-footer .elementor-element.elementor-element-dcf0000b .elementor-icon-list-icon {
	display: none;
}

/* cita zone: subhead voice + the house button (site-wide §3); hover flips
   to mint — the house spruce hover would vanish on this ground */
body .elementor-location-footer .elementor-element.elementor-element-dcf0000f .elementor-button:is(:hover, :focus) {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-accent);
}
body .elementor-location-footer .elementor-element.elementor-element-dcf0000d .elementor-heading-title {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.3;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 6px;
}
body .elementor-location-footer .elementor-element.elementor-element-dcf0000e p {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 16px;
}

/* legal bar: full-bleed spruce-deep, quiet center line */
body .elementor-location-footer .elementor-element.elementor-element-dcf00010 {
	background-color: var(--dc-color-spruce-deep);
	padding: 16px;
}
body .elementor-location-footer .elementor-element.elementor-element-dcf00011 p {
	margin: 0;
	text-align: center;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1024px) {
	body .elementor-location-footer .elementor-element.elementor-element-dcf00001 {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 767px) {
	body .elementor-location-footer .elementor-element.elementor-element-dcf00001 {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 0 36px;
	}
	body .elementor-location-footer .elementor-element.elementor-element-dcf00003 img {
		max-width: 160px;
	}
}

/* ==========================================================================
   §7 CITA MODAL — "Solicita tu cita" appointment popup (assets/js/cita-modal.js)
   Site-wide by class: the JS intercepts every WhatsApp link into this dialog
   and composes the visitor's input into the first WhatsApp message. The DOM is
   built entirely in JS, so nothing here paints without the script; display is
   gated on the JS-added .is-open, and entrance motion is enhancement-only
   (base state fully visible → reduced-motion + no-JS both degrade cleanly).
   Buttons are real <button>s, so the §3 house button rules style the primary
   action for free; only the ghost + close controls are re-voiced below.
   ========================================================================== */

/* scrim + centering. z-index clears the Elementor sticky header. */
body .dc-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none; /* .is-open (JS) reveals it — nothing shows without JS */
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 54, 52, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
body .dc-modal-backdrop.is-open { display: flex; }
body.dc-modal-active { overflow: hidden; } /* scroll-lock while open */

/* the card */
body .dc-modal {
	position: relative;
	width: 100%;
	max-width: min(520px, calc(100% - 32px));
	max-height: min(92vh, 760px);
	overflow-y: auto;
	background: #ffffff;
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-lift);
	padding: clamp(24px, 4vw, 40px);
}

body .dc-modal-title {
	font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--e-global-color-accent);
	margin: 0 40px 6px 0; /* clear the close button */
}
body .dc-modal-desc {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--dc-text-muted);
}
body .dc-modal-status {
	margin: 0 0 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dc-drop-deep);
}
body .dc-modal-status:empty { display: none; }

/* close — reset the house teal <button> (§3) back to a quiet icon control */
body.elementor-kit-18 .dc-modal .dc-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--dc-text-muted);
	background: transparent;
	border-radius: 50%;
	box-shadow: none;
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease);
}
body.elementor-kit-18 .dc-modal .dc-modal-close:is(:hover, :focus) {
	background: var(--e-global-color-cff305b);
	color: var(--e-global-color-accent);
	transform: none;
	box-shadow: none;
}

/* form layout */
body .dc-modal-form { margin: 0; }
body .dc-modal .dc-field { margin-bottom: 14px; }
body .dc-modal .dc-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
body .dc-modal .dc-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--e-global-color-text);
}
body .dc-modal .dc-field-hint {
	font-weight: 400;
	color: var(--dc-text-muted);
}
body .dc-modal .dc-field :is(input, select) {
	display: block;
	width: 100%;
}
/* input[type="date"] is absent from the §3 form rule — match the house look */
body.elementor-kit-18 .dc-modal input[type="date"] {
	border: var(--dc-border);
	border-radius: var(--dc-radius-btn);
	background: #ffffff;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--e-global-color-text);
	transition: border-color var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}
body.elementor-kit-18 .dc-modal input[type="date"]:focus {
	border-color: var(--e-global-color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 109, 107, 0.15);
	outline: none;
}
/* inline field errors + invalid ring */
body .dc-modal .dc-field-error {
	margin: 6px 0 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--dc-drop-deep);
}
body .dc-modal .dc-field-error:empty { display: none; }
body.elementor-kit-18 .dc-modal :is(input, select)[aria-invalid="true"] {
	border-color: var(--dc-color-drop);
	box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.14);
}

/* actions: primary teal (inherits §3 <button>), ghost = outline teal */
body .dc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}
body .dc-modal-actions .dc-btn-primary { flex: 1 1 auto; }
body.elementor-kit-18 .dc-modal .dc-btn-ghost {
	flex: 1 1 auto;
	background: transparent;
	color: var(--dc-color-teal-text);
	border: 1.5px solid var(--e-global-color-secondary);
	box-shadow: none;
}
body.elementor-kit-18 .dc-modal .dc-btn-ghost:is(:hover, :focus) {
	background: rgba(191, 227, 223, 0.35);
	color: var(--e-global-color-accent);
	border-radius: var(--dc-radius-btn-hover);
	transform: translateY(-1px) scale(1.03);
	box-shadow: none;
}

/* entrance — enhancement only; base state is fully visible so the §5
   reduced-motion kill switch and no-support browsers show it instantly. */
@media (prefers-reduced-motion: no-preference) {
	body .dc-modal-backdrop.is-open { animation: dc-focus-in var(--dc-speed) var(--dc-ease) both; }
	body .dc-modal.is-open { animation: dc-card-rise 240ms var(--dc-ease) both; }
}

/* mobile: full-width bottom sheet, stacked actions */
@media (max-width: 599px) {
	body .dc-modal-backdrop {
		align-items: flex-end;
		padding: 0;
	}
	body .dc-modal {
		max-width: 100%;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
		padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	body .dc-modal .dc-field-row { grid-template-columns: 1fr; gap: 0; }
	body .dc-modal-actions { flex-direction: column; }
	@media (prefers-reduced-motion: no-preference) {
		body .dc-modal.is-open { animation: dc-sheet-up 260ms var(--dc-ease) both; }
	}
}
@keyframes dc-sheet-up {
	from { transform: translateY(100%); }
	to   { transform: none; }
}