/* ==========================================================================
   DIABETCENTRO — APRENDE MÁS, the blog hub (page 8923; enqueued via
   is_page()). Same override convention as style.css: Elementor's own
   selector + `body` prefix. House keyframes/tokens live in style.css §1/§5.

   Section map (verified 2026-07-12; DOM finalized by tools/aprende-blog/ —
   the dcab000x ids are created there, footer-2026 convention):
     6d605929 SECTION (the whole page is one boxed section, one column)
       6d6327ef column → the widget-wrap becomes the blog-hub GRID (§0):
         dcab0001 h6  eyebrow "Blog · Educación en diabetes"
         3bd3f4da h1  "Aprende más sobre diabetes"           ┐ masthead left
         780b4b0e text-editor: h2 lede + intro p +           │ (photo right,
                  h3 YouTube link + p WhatsApp/contacto      ┘  sticky)
         a51c5a8  img (v4 atomic, direct child) — Dra. Prado teaching photo
         dcab0002 h2  "Artículos recientes"
         4dfb93aa Qi blog list — 5 posts, category "Aprende", excerpts on,
                  h3 titles (qodef--list / qi-columns / col-num--3)
         dccta0000 container: heading + text + button "Siguenos en Facebook" → CTA panel

   Blog-card DOM (Qi standard layout): article.qodef-blog-item >
     .qodef-e-inner > .qodef-e-media (a > img) + .qodef-e-content >
     .qodef-e-info.qodef-info--top (date a / category a) + .qodef-e-text >
     h3.qodef-e-title > a.qodef-e-title-link + p.qodef-e-excerpt.
   style.css §3 already gives cards the house chrome (white, hairline,
   radius 16, 3:2 media, hover lift+zoom); THIS file adds the blog-hub
   composition: featured-first grid, meta chips, read-more affordance,
   stretched-link cards, entrances.

   PUNCH LIST (Elementor/DB — code can't reach):
   - The masthead photo (a51c5a8) links nowhere; consider linking it to the
     newest post or the YouTube channel in Elementor if the client wants it
     clickable.
   - Pagination is configured with ekiticons chevrons (icon-chevron-left/
     right). It stays hidden until a 7th post exists in "Aprende"; if posts
     grow past 6, either add those two codepoints to the ekiticons subset
     (style.css §0 recipe) or swap the arrows to an SVG icon in Elementor.
   ========================================================================== */

/* ==========================================================================
   §0 COMPOSITION — the single column becomes the hub grid (desktop ≥1025px).
   Left 7fr: eyebrow → H1 → intro prose. Right 5fr: the teaching photo,
   sticky, spanning the three masthead rows. Full-width rows follow via
   grid-column:1/-1 + auto-placement (the photo's explicit area blocks
   column 2 for rows 1–3, so left-column items stack correctly).
   ========================================================================== */
@media (min-width: 1025px) {
	body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(40px, 4.5vw, 72px);
		row-gap: 0;
		align-items: start;
	}
	/* photo: rows 1-3 (eyebrow, H1, intro), column 2. NOT sticky — Chromium
	   constrains sticky grid items to the grid CONTAINER, not the item's
	   area, so a sticky photo rides down the whole feed. Static it is. */
	body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > img.e-image-base {
		grid-area: 1 / 2 / 4 / 3;
	}
	body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > :is(
		.elementor-element-dcab0002,
		.elementor-element-4dfb93aa
	) {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   §1 MASTHEAD — painted mint band (straddle recipe: the photo and the intro
   panel cross its bottom edge), eyebrow + display H1, editorial intro.
   ========================================================================== */
body .elementor-8923 .elementor-element.elementor-element-6d605929 {
	/* mirrors the kit's shorthand (was 50px 0 100px) */
	padding: clamp(44px, 5.5vw, 76px) 0 clamp(56px, 6.5vw, 88px) 0;
	--dc-band: clamp(400px, 32vw, 460px);
	background:
		radial-gradient(70% 90% at 92% 0%, rgba(191, 227, 223, 0.55), transparent 55%),
		linear-gradient(180deg, var(--e-global-color-cff305b) 0 var(--dc-band), #ffffff var(--dc-band));
}

/* eyebrow — real h6 widget; the global h6 voice supplies size/teal/tracking */
body .elementor-8923 .elementor-element.elementor-element-dcab0001 {
	text-align: left;
	margin-bottom: 10px;
}
body .elementor-8923 .elementor-element-dcab0001 .elementor-heading-title {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.13em;
	font-size: 0.8rem;
}

/* H1 — the page's lead display headline (kit centers it → editorial left) */
body .elementor-8923 .elementor-element.elementor-element-3bd3f4da {
	text-align: left;
	margin-bottom: 14px;
}
body .elementor-8923 .elementor-element-3bd3f4da .elementor-heading-title {
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--e-global-color-accent);
}

/* intro text-editor — kill the kit centering, set the measure */
body .elementor-8923 .elementor-element.elementor-element-780b4b0e {
	text-align: left;
}

/* the H2 duplicates the H1's keyphrase — demote to subhead voice (DOM kept) */
body .elementor-8923 .elementor-element-780b4b0e h2 {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--dc-color-teal-text);
	margin: 0 0 14px;
}
body .elementor-8923 .elementor-element-780b4b0e p {
	margin: 0 0 14px;
}

/* resource links: YouTube h3 + WhatsApp/contacto line → arrow-link voice */
body .elementor-8923 .elementor-element-780b4b0e h3 {
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 6px;
	color: var(--e-global-color-accent);
}
body .elementor-8923 .elementor-element-780b4b0e :is(h3, p) a {
	color: var(--dc-color-teal-text);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--e-global-color-primary);
	transition: color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-8923 .elementor-element-780b4b0e :is(h3, p) a:hover {
	color: var(--e-global-color-accent);
	border-bottom-color: var(--dc-color-drop);
}
/* external arrows: YouTube + WhatsApp leave the site */
body .elementor-8923 .elementor-element-780b4b0e h3 a::after,
body .elementor-8923 .elementor-element-780b4b0e p a[href*="wa.link"]::after {
	content: "\00a0\2197";
	display: inline-block;
	transition: transform var(--dc-speed) var(--dc-ease);
}
body .elementor-8923 .elementor-element-780b4b0e h3 a:hover::after,
body .elementor-8923 .elementor-element-780b4b0e p a[href*="wa.link"]:hover::after {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   §2 THE PHOTO — Dra. Prado teaching; editorial portrait plate.
   The atomic rule `.elementor .e-a51c5a8-1147929` authors width:300px —
   beaten by specificity (no !important needed).
   ========================================================================== */
body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > img.e-image-base {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	object-position: 50% 30%; /* keep the demonstration in frame */
	border-radius: var(--dc-radius-media);
	box-shadow: var(--dc-shadow-lift);
}

/* ==========================================================================
   §3 ARTÍCULOS — the article feed: display H2 with the house divider,
   featured-first grid, meta chips, excerpts, stretched-link cards.
   ========================================================================== */
body .elementor-8923 .elementor-element.elementor-element-dcab0002 {
	text-align: left;
	margin: clamp(56px, 7vw, 96px) 0 clamp(24px, 3vw, 36px);
}
body .elementor-8923 .elementor-element-dcab0002 .elementor-heading-title {
	color: var(--e-global-color-accent);
}
/* divider: crimson head, mint tail (house micro-accent) */
body .elementor-8923 .elementor-element-dcab0002 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--dc-color-drop) 0 12px, var(--e-global-color-primary) 12px);
}

/* -- grid: 2 columns, the newest post spans both ------------------------- */
body .elementor-8923 .elementor-element.elementor-element-4dfb93aa .qodef-qi-grid > .qodef-grid-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-inner > .qodef-grid-item:first-child {
	grid-column: 1 / -1;
}

/* -- featured card: horizontal split, media fills the left half ---------- */
@media (min-width: 768px) {
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-inner > .qodef-grid-item:first-child .qodef-e-inner {
		display: grid;
		grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
	}
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-media {
		height: 100%;
	}
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-media-image {
		aspect-ratio: auto;
		height: 100%;
		min-height: 340px;
	}
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-content {
		padding: clamp(26px, 3vw, 44px) clamp(26px, 3.2vw, 48px);
		justify-content: center;
	}
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-title {
		font-size: clamp(1.5rem, 1.24rem + 1.1vw, 2.05rem);
		line-height: 1.18;
		letter-spacing: -0.015em;
	}
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-excerpt {
		font-size: 1.02rem;
		-webkit-line-clamp: 4;
	}
	/* centered content block: the read-more travels with it (the global
	   margin-top:auto pin is for the uniform vertical cards) */
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-content::after {
		margin-top: 22px;
	}
}

/* -- card content: column flow so the read-more pins to the foot --------- */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-content {
	display: flex;
	flex-direction: column;
	padding: 20px 22px 22px;
}

/* meta row → chips: category = mint pill, date = quiet data voice */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-info.qodef-info--top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 12px;
}
/* Qi's "/" separator — FULL selector mirror (its rule carries five classes;
   a short "equivalent" silently loses, SKILL §5) */
body .elementor-8923 .qodef-addons-blog-list.qodef-info-no-icons .qodef-e-info .qodef-e-info-item:not(:last-child)::after {
	content: none;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-category {
	order: 1;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-category .qodef-category-separator {
	display: none;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-category a {
	position: relative;
	z-index: 2; /* stays clickable above the stretched card link */
	display: inline-block;
	padding: 4px 12px 3px;
	border-radius: 999px;
	background: var(--e-global-color-primary);
	color: var(--dc-color-teal-text);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease);
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-category a:hover {
	background: var(--e-global-color-secondary);
	color: #ffffff;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-date {
	order: 2;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dc-text-muted);
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-date a {
	color: inherit;
	position: relative;
	z-index: 2;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-info-date a:hover {
	color: var(--dc-color-teal-text);
}

/* the newest post wears the house flag (real text — announced in Spanish) */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-info.qodef-info--top::before {
	content: "Artículo reciente";
	order: 0;
	display: inline-block;
	padding: 4px 12px 3px;
	border-radius: 999px;
	background: var(--e-global-color-accent);
	color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* title + excerpt */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-title {
	font-weight: 700;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-excerpt {
	margin: 10px 0 0;
	color: var(--dc-text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* stretched link: the whole card navigates (title link overlays the card) */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-inner {
	position: relative;
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-e-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* read-more affordance, pinned to the card foot */
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-content::after {
	content: "Leer artículo \00a0\2192";
	margin-top: auto;
	padding-top: 16px;
	color: var(--dc-color-teal-text);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.92rem;
	font-weight: 700;
	transition: transform var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease);
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item:hover .qodef-e-content::after {
	transform: translateX(5px);
	color: var(--e-global-color-accent);
}
body .elementor-8923 .elementor-element-4dfb93aa .qodef-blog-item .qodef-e-text {
	margin-bottom: 2px;
}

/* pagination insurance (hidden until a 7th post exists) — house voice */
body .elementor-8923 .qodef-addons-m-pagination .page-numbers {
	border-radius: var(--dc-radius-btn);
	transition: background-color var(--dc-speed) var(--dc-ease),
		color var(--dc-speed) var(--dc-ease);
}

/* ==========================================================================
   §4 CTA — the closing dark beat. REAL classic container (dccta0000) that
   centers its items NATIVELY via Elementor flex settings (flex_align_items +
   flex_justify_content = center) — so it renders centered in the Elementor
   editor AND on the front end, unlike the old atomic-flexbox + ::before/::after
   pseudo-text hack. This file only paints the spruce-panel skin + voices; the
   copy is real, editable widgets: dccta0001 heading · dccta0002 text · dccta0003
   button. Root-level sibling of the section — boxes itself to the 1200px width.
   ========================================================================== */
body .elementor-8923 .elementor-element-dccta0000 {
	max-width: min(1200px, calc(100% - 32px));
	margin: 0 auto 48px;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px);
	border-radius: var(--dc-radius-media);
	background:
		radial-gradient(80% 110% at 94% 6%, rgba(191, 227, 223, 0.14), transparent 50%),
		radial-gradient(circle at 12% 92%, rgba(47, 167, 159, 0.25), transparent 55%),
		var(--e-global-color-accent);
	box-shadow: var(--dc-shadow-soft);
	text-align: center;
}
/* headline (header_size div — non-semantic, keeps the page heading outline) */
body .elementor-8923 .elementor-element-dccta0001 .elementor-heading-title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 700;
}
/* supporting line — 52ch measure on the <p> (the widget stays full-width) */
body .elementor-8923 .elementor-element-dccta0002 {
	margin-block: 6px 14px;
}
body .elementor-8923 .elementor-element-dccta0002 p {
	max-width: 52ch;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.88);
	font-size: 1rem;
	line-height: 1.55;
}
/* ghost-on-spruce button (overrides the site-wide teal button fill) */
body .elementor-8923 .elementor-element-dccta0003 .elementor-button {
	border-radius: var(--dc-radius-btn);
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	color: #ffffff;
	box-shadow: none;
}
body .elementor-8923 .elementor-element-dccta0003 .elementor-button:is(:hover, :focus) {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--e-global-color-accent);
	box-shadow: var(--dc-shadow-lift);
}

/* ==========================================================================
   §5 DEPTH — house entrances (scroll-driven, gated; style.css §5 keyframes)
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* first viewport: arrive once, time-based */
		body .elementor-8923 .elementor-element-dcab0001,
		body .elementor-8923 .elementor-element-3bd3f4da {
			animation: dc-focus-in 720ms var(--dc-ease) both;
		}
		body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > img.e-image-base {
			animation: dc-card-rise 680ms var(--dc-ease) both;
		}
		/* the feed: each card rises as it enters, staggered ranges */
		body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
		body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:nth-child(3),
		body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:nth-child(5) {
			animation-range: entry 10% entry 52%;
		}
		body .elementor-8923 .elementor-element-dccta0000 {
			animation: dc-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}

/* ==========================================================================
   §6 TABLET (768–1024) — stock stacked flow; the photo becomes a banner
   ========================================================================== */
/* below the boxed width the kit leaves the container edge-flush — inset it
   (also covers 1025-1240 desktop, where the grid is active) */
@media (max-width: 1240px) {
	body .elementor-8923 .elementor-element-6d605929 > .elementor-container {
		padding-inline: 24px;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > img.e-image-base {
		aspect-ratio: 2 / 1;
		object-position: 50% 24%;
		margin-block: 8px 10px;
	}
}

/* ==========================================================================
   §7 MOBILE (<768px) — one column; the six kit failure classes audited
   ========================================================================== */
@media (max-width: 767px) {
	body .elementor-8923 .elementor-element.elementor-element-6d605929 {
		--dc-band: 330px;
		padding: 32px 0 56px 0;
	}
	body .elementor-8923 .elementor-element-6d605929 > .elementor-container {
		padding-inline: 16px;
	}
	/* photo: landscape banner between the intro and the feed — position the
	   crop so the insulin demonstration stays in frame, not just the shelf */
	body .elementor-8923 .elementor-element-6d6327ef > .elementor-element-populated > img.e-image-base {
		aspect-ratio: 4 / 3;
		/* was 38% — the frame sat too low. Raising the crop window 20pts moves
		   the image DOWN in its box; the demonstration is still in frame. */
		object-position: 50% 18%;
		border-radius: 20px;
		margin-block: 6px 8px;
	}
	/* keep the external ↗ glued to the last word (inline-block orphan-wraps) */
	body .elementor-8923 .elementor-element-780b4b0e h3 a::after,
	body .elementor-8923 .elementor-element-780b4b0e p a[href*="wa.link"]::after {
		display: inline;
	}
	/* headline must also clear 360px viewports */
	body .elementor-8923 .elementor-element-dccta0001 .elementor-heading-title {
		font-size: 1.35rem;
	}
	/* feed: single column */
	body .elementor-8923 .elementor-element.elementor-element-4dfb93aa .qodef-qi-grid > .qodef-grid-inner {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	/* featured card stacks like the others (media back to the 3:2 plate) */
	body .elementor-8923 .elementor-element-4dfb93aa .qodef-grid-item:first-child .qodef-e-content {
		padding: 20px 22px 22px;
	}
	/* CTA: comfortable, button full width */
	body .elementor-8923 .elementor-element-dccta0000 {
		max-width: calc(100% - 24px);
		padding: 36px 22px;
	}
	body .elementor-8923 .elementor-element-dccta0003 {
		align-self: stretch;
	}
	body .elementor-8923 .elementor-element-dccta0003 .elementor-button {
		width: 100%;
	}
}