/* ========================================================================== DIABETCENTRO — the six institutional "Nosotros" docs. POSTS originally; PAGES since the 2026-07 conversion (tools/nosotros-pages/RUNBOOK.md — the functions.php enqueue matches both via dc_is_nosotros_doc()). Convention: Elementor's selector + `body` prefix. Six hand-cloned Elementor documents — styling keys on WIDGET CLASSES (the enqueue scopes the file), per-doc ids only for divergences. The conversion runbook PRUNED the blog chrome from the JSON: author/date/terms + their icon decorations, post-comments, hfe-search, "Continue Reading" tails, 10099's abandoned draft section 2bb7f8bb. Per-doc map (2026-07-11): 10297 quienes-somos title 52cad426 · dup content-H1 (punch list) · founders duo in the prose (§10) 10208 nuestra-historia title 19a0f71 · featured 6396a56f 9811 en-que-creemos NO masthead widgets (content-only doc) 10066 que-hacemos NO masthead widgets 10099 resultados title 1ef39eee 10164 opiniones title 14a2c18b · featured 274eae71 Tail on the masthead docs: "Sigue aprendiendo" h5 + Qi blog-list (cards inherit style.css §3). ========================================================================== */ /* -- §1 MASTHEAD: the scrimmed hero band -------------------------------------- The four masthead docs (dt-post-title present) open on a radius-24 BAND painted as the TITLE WIDGET'S OWN ::before. Since the conversion runbook removed the meta line, the title is the band's only rider — the band takes its size from the padded, min-height'd title box (any title line-count works; the old per-doc --dc-postband/--dc-postclear constants are gone). Title anchors bottom-left, magazine-style. Photo docs (10208/10164) put the featured photo under the homepage 160deg scrim; the others take the brand gradient plate. 9811/10066 have no masthead widgets — no band until the punch-list retags land. */ body .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-dt-post-title) > .elementor-widget-wrap { padding-top: clamp(20px, 3vw, 32px); } /* the title box IS the band (DethemeKit dt-post-title; tag drifts h1/h2) */ body .elementor-widget-dt-post-title { position: relative; z-index: 0; /* own stacking context: the band's z -1 stays above page bg */ display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(220px, 26vw, 340px); padding: 32px clamp(24px, 3.5vw, 48px) clamp(36px, 5vw, 56px); margin-bottom: 40px; } body .elementor-widget-dt-post-title::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--dc-radius-media); box-shadow: var(--dc-shadow-soft); /* default: the brand gradient plate (style.css §3 recipe) */ 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%); background-size: cover; background-position: center; } /* photo docs: featured image under the homepage scrim (UPDATE TOGETHER with the docs' featured images — mirror-comment convention) */ body .elementor-10208 .elementor-widget-dt-post-title::before { background-image: linear-gradient(160deg, rgba(0, 74, 72, 0.92) 0%, rgba(0, 74, 72, 0.55) 55%, rgba(0, 74, 72, 0.3) 100%), image-set( url("../../../../uploads-webpc/uploads/2026/06/ale-y-fa-1024x678.jpg.webp") type("image/webp"), url("../../../../uploads/2026/06/ale-y-fa-1024x678.jpg") type("image/jpeg")); /* sized variant — the band renders ≤~900px wide */ } body .elementor-10164 .elementor-widget-dt-post-title::before { background-image: linear-gradient(160deg, rgba(0, 74, 72, 0.92) 0%, rgba(0, 74, 72, 0.55) 55%, rgba(0, 74, 72, 0.3) 100%), image-set( url("../../../../uploads-webpc/uploads/2026/06/saludo-cordial.png.webp") type("image/webp"), url("../../../../uploads/2026/06/saludo-cordial.png") type("image/png")); } /* the in-flow featured plates are replaced by their bands */ body :is(.elementor-10208, .elementor-10164) .elementor-widget-post-featured-image { display: none; } body .elementor-widget-dt-post-title :is(h1, h2, h3) { font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem); line-height: 1.08; letter-spacing: -0.02em; color: #ffffff; margin: 0 0 6px; } body .elementor-widget-dt-post-title :is(h1, h2, h3)::after { content: ""; display: block; margin-top: 18px; width: 76px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--dc-color-drop) 0 20px, var(--e-global-color-primary) 20px); /* mint body on the dark band */ } /* (the author/date/terms meta line was deleted from the documents by the conversion runbook — its inline-collapse and band-clear rules left with it: prose now follows the title box's own 40px margin) */ /* featured image → radius-24 media plate */ body .elementor-widget-post-featured-image img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--dc-radius-media); box-shadow: var(--dc-shadow-soft); } /* -- §2 PROSE ------------------------------------------------------------------ */ body .elementor-widget-text-editor { max-width: 70ch; } /* in-content H1 duplicates (10297/10208) demote to the section-H2 voice — the semantic retag/deletion is punch-listed */ body .elementor-widget-text-editor h1 { font-size: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--e-global-color-accent); margin: 30px 0 12px; } body .elementor-widget-text-editor h2 { font-size: clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem); line-height: 1.25; color: var(--e-global-color-accent); margin: 26px 0 10px; } body .elementor-widget-text-editor h3 { font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem); line-height: 1.35; font-weight: 600; color: var(--dc-color-teal-text); margin: 22px 0 8px; } body .elementor-widget-text-editor a { color: var(--dc-color-teal-text); text-decoration: none; border-bottom: 2px solid var(--e-global-color-primary); transition: color var(--dc-speed) var(--dc-ease), border-color var(--dc-speed) var(--dc-ease); } body .elementor-widget-text-editor a:hover { color: var(--e-global-color-accent); border-color: var(--dc-color-drop); } body .elementor-widget-text-editor li { margin-bottom: 6px; } /* -- §3 TAIL (related/latest lists + headings) --------------------------------- */ /* the "Sigue aprendiendo" heading lives in the column that holds the Qi blog-list — :has() scopes it so 9811's content H4 stays untouched. (Renamed from "Latest News" by the conversion runbook.) */ body .elementor-column:has(.qodef-addons-blog-list) .elementor-widget-heading :is(h4, h5) { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: 700; font-size: var(--dc-fs-eyebrow); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-color-teal-text); margin: 8px 0 14px; } /* the tail's blog-cards inherit the site card system from style.css §3 */ /* -- §3b TAIL CTA PAIR: white card + spruce dark beat --------------------------- Each doc's closing info-card pair takes the 9276 two-tone: first card white house chrome, the cita/action card the page's DARK BEAT. Per-doc ids (10099's draft-section twin died with section 2bb7f8bb). */ body :is( .elementor-10297 .elementor-element.elementor-element-21b24cd2, .elementor-10208 .elementor-element.elementor-element-4b090a53, .elementor-10099 .elementor-element.elementor-element-1b3b71a1, .elementor-10164 .elementor-element.elementor-element-72f08cb6) .qodef-qi-info-cards { background-color: #ffffff; border: var(--dc-border); border-radius: var(--dc-radius-card); padding: 20px 22px; transition: border-color var(--dc-speed) var(--dc-ease), transform var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease); } body :is( .elementor-10297 .elementor-element.elementor-element-21b24cd2, .elementor-10208 .elementor-element.elementor-element-4b090a53, .elementor-10099 .elementor-element.elementor-element-1b3b71a1, .elementor-10099 .elementor-element.elementor-element-926e059, .elementor-10164 .elementor-element.elementor-element-72f08cb6):hover .qodef-qi-info-cards { border-color: var(--e-global-color-secondary); transform: translateY(-3px); box-shadow: var(--dc-shadow-soft); } body :is( .elementor-10297 .elementor-element.elementor-element-3a624b34, .elementor-10208 .elementor-element.elementor-element-77410ac2, .elementor-10099 .elementor-element.elementor-element-767625f7, .elementor-10099 .elementor-element.elementor-element-22ad8859, .elementor-10164 .elementor-element.elementor-element-2d25102b) .qodef-qi-info-cards { background-color: var(--e-global-color-accent); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--dc-radius-card); padding: 20px 22px; box-shadow: var(--dc-shadow-soft); transition: transform var(--dc-speed) var(--dc-ease), box-shadow var(--dc-speed) var(--dc-ease); } body :is( .elementor-10297 .elementor-element.elementor-element-3a624b34, .elementor-10208 .elementor-element.elementor-element-77410ac2, .elementor-10099 .elementor-element.elementor-element-767625f7, .elementor-10099 .elementor-element.elementor-element-22ad8859, .elementor-10164 .elementor-element.elementor-element-2d25102b):hover .qodef-qi-info-cards { transform: translateY(-3px); box-shadow: var(--dc-shadow-lift); } body :is( .elementor-10297 .elementor-element.elementor-element-3a624b34, .elementor-10208 .elementor-element.elementor-element-77410ac2, .elementor-10099 .elementor-element.elementor-element-767625f7, .elementor-10099 .elementor-element.elementor-element-22ad8859, .elementor-10164 .elementor-element.elementor-element-2d25102b) .qodef-qi-info-cards :is(.qodef-m-title, .qodef-m-title a) { color: #ffffff; } body :is( .elementor-10297 .elementor-element.elementor-element-3a624b34, .elementor-10208 .elementor-element.elementor-element-77410ac2, .elementor-10099 .elementor-element.elementor-element-767625f7, .elementor-10099 .elementor-element.elementor-element-22ad8859, .elementor-10164 .elementor-element.elementor-element-2d25102b) .qodef-qi-info-cards .qodef-m-text { color: rgba(255, 255, 255, 0.88); } body :is( .elementor-10297 .elementor-element.elementor-element-3a624b34, .elementor-10208 .elementor-element.elementor-element-77410ac2, .elementor-10099 .elementor-element.elementor-element-767625f7, .elementor-10099 .elementor-element.elementor-element-22ad8859, .elementor-10164 .elementor-element.elementor-element-2d25102b) .qodef-qi-info-cards :is(.qodef-m-icon-holder, .qodef-m-icon-holder a, .qodef-m-button .qodef-qi-button) { color: var(--e-global-color-primary); } /* -- §4 PER-DOC DIVERGENCES ----------------------------------------------------- */ /* (10099's abandoned draft section 2bb7f8bb was deleted from the document by the conversion runbook — the display:none stopgap left with it) */ /* 10164: photo band gets a touch more presence for its wide testimonial shot */ body .elementor-10164 .elementor-widget-dt-post-title { min-height: clamp(240px, 28vw, 360px); } /* -- §5 MOBILE (<768px) ----------------------------------------------------------- */ @media (max-width: 767px) { body .elementor-widget-post-featured-image img { max-height: 300px; } /* the band is content-sized now — only inset the plate so its radius-24 corners read instead of kissing the screen edges (kit zeroes column padding <768, same grammar as the member portrait plates) */ body .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-dt-post-title) > .elementor-widget-wrap { padding-top: 16px; padding-inline: 16px; } } /* -- §6 CONTENT-ONLY DOCS (9811, 10066): masthead + full-width editorial ------ These two opened with NO masthead and a 50%-EMPTY column (the blank the client flagged), and no

at all. tools/nosotros-mastheads gave each a real first

(9811 retagged its buried headline; 10066 got eyebrow + "Filosofía de atención"). Here that first

becomes the cluster's gradient band (§1's dt-post-title recipe), the empty column is dropped, and the doc runs full width with readable prose. */ /* drop the empty half; the content column fills the row */ body .elementor-9811 .elementor-element.elementor-element-1ffd2ccc, body .elementor-10066 .elementor-element.elementor-element-4a622098 { display: none; } body .elementor-9811 .elementor-element.elementor-element-591ae57c, body .elementor-10066 .elementor-element.elementor-element-34628a4b { width: 100%; max-width: 100%; flex: 1 1 100%; } /* the content column's widget-wrap carried an authored 150px top margin — a vertical offset from the 50/50 design that is dead space now it's full width. Replace with a sane gap below the header (band starts near the top). */ body .elementor-9811 .elementor-element.elementor-element-591ae57c > .elementor-widget-wrap, body .elementor-10066 .elementor-element.elementor-element-34628a4b > .elementor-widget-wrap { margin-top: 0; padding-top: clamp(28px, 4vw, 48px); } /* the text-editor runs full width; prose is capped for readability so only the band + section headings span the full measure */ body :is(.elementor-9811, .elementor-10066) .elementor-widget-text-editor { max-width: none; } body :is(.elementor-9811, .elementor-10066) .elementor-widget-text-editor :is(p, ol) { max-width: 68ch; } /* the eyebrow: 9811's is a real h6 widget (global eyebrow voice already applies); 10066's rides inside the text-editor — match the voice here */ body .elementor-10066 .elementor-widget-text-editor h6:first-child { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: 700; font-size: var(--dc-fs-eyebrow); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-color-teal-text); margin: 0 0 12px; } /* the FIRST

IS the gradient band (title-only masthead — §1 recipe, but collapsed onto the heading since there is no dt-post-title wrapper here) */ body :is(.elementor-9811, .elementor-10066) .elementor-widget-text-editor h1 { position: relative; z-index: 0; /* own stacking context so the band's z-1 stays above page bg */ display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(200px, 24vw, 320px); padding: 32px clamp(24px, 3.5vw, 48px) clamp(32px, 4.5vw, 48px); margin: 0 0 36px; border-radius: var(--dc-radius-media); box-shadow: var(--dc-shadow-soft); font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem); line-height: 1.08; letter-spacing: -0.02em; color: #ffffff; max-width: none; } body :is(.elementor-9811, .elementor-10066) .elementor-widget-text-editor h1::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--dc-radius-media); /* the brand gradient plate (style.css §3 recipe, mirrored from §1) */ 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%); background-size: cover; background-position: center; } body :is(.elementor-9811, .elementor-10066) .elementor-widget-text-editor h1::after { content: ""; display: block; margin-top: 18px; width: 76px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--dc-color-drop) 0 20px, var(--e-global-color-primary) 20px); /* mint body on the dark band */ } /* the stray closing CTA rows read as loose buttons on a wall of prose — give them air above so they land as a deliberate close */ body .elementor-9811 .elementor-element.elementor-element-2642e37, body .elementor-10066 .elementor-element.elementor-element-08e3570 { margin-top: 8px; } /* -- §7 FEATURE BULLETS → mint chip rows ------------------------------------- Plain