/* ============================================================================ CARDIO CORAZON — capa de marca ---------------------------------------------------------------------------- Redefine los tokens del template MD con la identidad del cliente. Se carga ultimo en el , con la misma especificidad que los originales, asi gana por orden de cascada y no necesita un solo !important. Para revertir por completo: borrar el de este archivo. Nada mas. PALETA Azul Profundo #0B1D3A titulos, fondos oscuros Azul Medico #1E4C8A acento: botones, links, iconos Gris Plata #D1D6DC bordes Blanco Puro #FFFFFF fondo, titulos sobre oscuro Los tonos derivados se construyen sobre el eje Azul Profundo <-> Gris Plata, sin introducir matices ajenos a la paleta. TIPOGRAFIA Montserrat 600 (SemiBold) titulos, menu, botones, logo Montserrat 400 (Regular) cuerpo de texto ========================================================================== */ /* -------------------------------------------------------------------------- 1. Color — tokens del tema -------------------------------------------------------------------------- */ .scheme_default, body.scheme_default, .scheme_default:where(.editor-styles-wrapper) { /* --- Esquema claro ---------------------------------------------------- */ /* Fondos */ --theme-color-bg_color: #FFFFFF; /* Blanco Puro */ --theme-color-bg_color_0: rgba(255,255,255,0); --theme-color-bg_color_02: rgba(255,255,255,0.2); --theme-color-bg_color_05: rgba(255,255,255,0.5); --theme-color-bg_color_07: rgba(255,255,255,0.7); --theme-color-bg_color_09: rgba(255,255,255,0.9); --theme-color-bg_color_2: #F1F3F6; /* Gris Plata al 30% sobre blanco */ --theme-color-bg_color_2_05: rgba(241,243,246,0.7); /* Bordes */ --theme-color-bd_color: #D1D6DC; /* Gris Plata */ /* Texto */ --theme-color-title: #0B1D3A; /* Azul Profundo — 16.9:1 sobre blanco */ --theme-color-text: #4A5A72; /* derivado — 7.0:1 */ --theme-color-meta: #596B88; /* derivado — 5.4:1 s/blanco, 4.9:1 s/#F1F3F6 */ /* Acento */ --theme-color-link: #1E4C8A; /* Azul Medico — 8.5:1 sobre blanco */ --theme-color-link_07: rgba(30,76,138,0.7); --theme-color-link_blend: #24589C; --theme-color-hover: #0B1D3A; /* el acento oscurece hacia Azul Profundo */ /* --- Esquema oscuro --------------------------------------------------- */ /* Fondos */ --theme-color-alt_bg_color: #0B1D3A; /* Azul Profundo */ --theme-color-alt_bg_color_05: rgba(11,29,58,0.5); --theme-color-alt_bg_color_2: #11294D; /* derivado — Azul Profundo hacia Azul Medico */ /* Bordes */ --theme-color-alt_bd_color: #1E3557; /* derivado */ /* Texto */ --theme-color-alt_title: #FFFFFF; /* Blanco Puro */ --theme-color-alt_title_08: rgba(255,255,255,0.8); --theme-color-alt_text: #C3CBD6; /* derivado de Gris Plata — 10.4:1 */ --theme-color-alt_meta: #8D97A8; /* derivado — 5.7:1 */ /* Acento sobre oscuro. El Azul Medico da 2.0:1 sobre el Azul Profundo: ilegible. Se usa el mismo tono y saturacion, subiendo solo la luminosidad hasta 6.5:1. */ --theme-color-alt_link: #81A3CF; --theme-color-alt_hover: #FFFFFF; /* sobre oscuro el hover aclara */ } /* -------------------------------------------------------------------------- 2. Color — espejo de Elementor -------------------------------------------------------------------------- */ .elementor-kit-1 { --e-global-color-theme_color_bg_color: #FFFFFF; --e-global-color-theme_color_bg_color_2: #F1F3F6; --e-global-color-theme_color_bd_color: #D1D6DC; --e-global-color-theme_color_title: #0B1D3A; --e-global-color-theme_color_text: #4A5A72; --e-global-color-theme_color_meta: #596B88; --e-global-color-theme_color_link: #1E4C8A; --e-global-color-theme_color_hover: #0B1D3A; --e-global-color-theme_color_alt_bg_color: #0B1D3A; --e-global-color-theme_color_alt_bg_color_2: #11294D; --e-global-color-theme_color_alt_bd_color: #1E3557; --e-global-color-theme_color_alt_title: #FFFFFF; --e-global-color-theme_color_alt_text: #C3CBD6; --e-global-color-theme_color_alt_meta: #8D97A8; --e-global-color-theme_color_alt_link: #81A3CF; --e-global-color-theme_color_alt_hover: #FFFFFF; } /* -------------------------------------------------------------------------- 3. Color — espejo de WordPress (clases .has-*-color de los bloques) -------------------------------------------------------------------------- */ :root { --wp--preset--color--theme-color-bg-color: #FFFFFF; --wp--preset--color--theme-color-bg-color-2: #F1F3F6; --wp--preset--color--theme-color-bd-color: #D1D6DC; --wp--preset--color--theme-color-title: #0B1D3A; --wp--preset--color--theme-color-meta: #596B88; --wp--preset--color--theme-color-link: #1E4C8A; --wp--preset--color--theme-color-hover: #0B1D3A; } /* -------------------------------------------------------------------------- 4. Tipografia — tokens del tema -------------------------------------------------------------------------- */ :root { --theme-font-h1_font-family: Montserrat, sans-serif; --theme-font-h2_font-family: Montserrat, sans-serif; --theme-font-h3_font-family: Montserrat, sans-serif; --theme-font-h4_font-family: Montserrat, sans-serif; --theme-font-h5_font-family: Montserrat, sans-serif; --theme-font-h6_font-family: Montserrat, sans-serif; --theme-font-p_font-family: Montserrat, sans-serif; --theme-font-menu_font-family: Montserrat, sans-serif; --theme-font-submenu_font-family:Montserrat, sans-serif; --theme-font-button_font-family: Montserrat, sans-serif; --theme-font-logo_font-family: Montserrat, sans-serif; } /* -------------------------------------------------------------------------- 5. Tipografia — espejo de Elementor -------------------------------------------------------------------------- */ .elementor-kit-1 { --e-global-typography-theme_font_h1-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_h2-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_h3-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_h4-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_h5-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_h6-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_p-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_menu-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_submenu-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_button-font-family: Montserrat, sans-serif; --e-global-typography-theme_font_logo-font-family: Montserrat, sans-serif; --e-global-typography-primary-font-family: Montserrat, sans-serif; --e-global-typography-secondary-font-family: Montserrat, sans-serif; --e-global-typography-text-font-family: Montserrat, sans-serif; --e-global-typography-accent-font-family: Montserrat, sans-serif; } /* -------------------------------------------------------------------------- 6. Calibracion optica de Montserrat -------------------------------------------------------------------------- Montserrat pide ~22.6% mas de ancho que Urbanist para el mismo texto, y su tinta (ascendente + descendente) ocupa 0.985em. Los valores de abajo salen de medir en pantalla, no de estimar. -------------------------------------------------------------------------- */ /* Tracking. En display, Montserrat tiene mas prosa lateral que Urbanist y necesita algo mas de tracking negativo para no verse suelta. */ :root { --theme-font-h1_letter-spacing: -0.02em; --theme-font-h2_letter-spacing: -0.02em; --theme-font-h3_letter-spacing: -0.015em; } .elementor-kit-1 { --e-global-typography-theme_font_h1-letter-spacing: -0.02em; --e-global-typography-theme_font_h2-letter-spacing: -0.02em; --e-global-typography-theme_font_h3-letter-spacing: -0.015em; } /* Interlineado del titular del hero. Elementor lo fija en 0.93em. La tinta de Montserrat necesita 0.985em, asi que una 'g' de una linea podia tocar la mayuscula de la siguiente. 1.0 es el minimo seguro. Mismo selector que la regla original: gana por orden. */ .elementor-47 .elementor-element.elementor-element-51db2969 .trx-addons-advanced-title { line-height: 1em; } /* -------------------------------------------------------------------------- 7. Correcciones de contraste heredadas del template -------------------------------------------------------------------------- */ /* El badge de categoria de la cabecera del post usa el acento del esquema OSCURO sobre una pagina clara: texto blanco a 2.6:1. Ya fallaba con la paleta original (2.4:1). Pasa al acento del esquema claro: 8.5:1. */ .post_header_single .post_meta_item.post_categories a { background-color: var(--theme-color-link); } /* Menu movil deslizante. Su panel se pinta con alt_bg_color_2 (azul profundo), pero el item de la pagina activa toma el acento del esquema CLARO: quedaba a 1.7:1, ilegible. Con el turquesa original pasaba de casualidad (5.2:1). Elementor lo fija en 48 reglas repartidas en 4 plantillas de cabecera, todas leyendo var(--e-global-color-theme_color_link). En vez de pelear la especificidad de cada una, se redefine la variable con alcance al panel: las reglas quedan intactas y resuelven al acento del esquema oscuro. Solo estos 4 elementos: son los unicos paneles de menu con fondo oscuro. El desplegable de escritorio de cada cabecera es claro y no se toca. */ .elementor-element-443bfff, .elementor-element-a3bcda3, .elementor-element-59c578b, .elementor-element-155fc4e2 { --e-global-color-theme_color_link: #81A3CF; /* 5.6:1 sobre el panel */ --e-global-color-theme_color_hover: #FFFFFF; --theme-color-link: #81A3CF; --theme-color-hover: #FFFFFF; }