/* ========================================================================= PALETA GOZO — capa de armonización Se carga la última del . Principio: Elementor guarda el diseño real en su CSS por elemento (post-*.css), y ese CSS ya se ha reescrito a la paleta nueva. Esta hoja NO re-pinta la web: sólo cubre lo que la sustitución no puede alcanzar — superficies base, el bug de :hover del kit, y el "chrome" de plugins (WooCommerce, formularios, calendario, cookies) que Elementor no estiliza. Casi todas las reglas van a baja especificidad a propósito: si Elementor define un color para un elemento concreto, debe ganar él. El !important sólo aparece donde el plugin escribe el color en línea. Reparto de roles (y por qué): #F4EBDC crema principal .... fondo de página #FAF3EA crema clara ........ superficies elevadas (tarjetas, inputs) #D8A04B dorado tostado ..... acento; como fondo con texto oscuro (5,9:1) o sobre marrón. Sobre crema da 1,96:1 -> nunca texto. #B36A2E caramelo oscuro .... bordes, iconos, hover, énfasis grande (3,5:1 sobre crema: texto grande sí, cuerpo no) #5A3A24 marrón profundo .... titulares y zonas oscuras (8,6:1 sobre crema) #2E2E2C gris oscuro ........ texto de cuerpo (11,5:1 sobre crema) ========================================================================= */ :root, .elementor-kit-14 { --gozo-crema: #F4EBDC; --gozo-crema-clara: #FAF3EA; --gozo-dorado: #D8A04B; --gozo-caramelo: #B36A2E; --gozo-marron: #5A3A24; --gozo-gris: #2E2E2C; /* tintes derivados: mezclas de la propia paleta, no colores nuevos */ --gozo-borde: rgba(90, 58, 36, .18); --gozo-borde-fuerte: rgba(90, 58, 36, .38); --gozo-sombra: rgba(90, 58, 36, .14); --gozo-sombra-suave: rgba(90, 58, 36, .07); --gozo-velo: rgba(90, 58, 36, .06); } /* ---------- 0. El acento depende del contexto ---------- */ /* --e-global-color-primary es el "color pop" del sitio: el amarillo original. Se usa 40-130 veces por página, casi siempre como color de TEXTO, y en dos contextos opuestos: sobre las fotos del hero y sobre fondo claro. Un único color no sirve para los dos -- el dorado sobre crema da 1,96:1. Así que la variable se redefine por contexto, que es lo que hacía falta: · por defecto (contenido sobre crema) -> marrón, 8,6:1 · dentro de cabecera, pie y secciones con foto de fondo -> dorado, que es donde el dorado luce y contrasta. Al ser una variable CSS, la cascada la propaga sola a todo lo que hay dentro. */ body.elementor-kit-14 { --e-global-color-primary: #5A3A24; } .elementor-location-header, .elementor-location-footer, .elementor-element:has(> .elementor-background-slideshow), .elementor-element:has(> .elementor-background-overlay), .elementor-element:has(> .swiper > .elementor-background-slideshow) { --e-global-color-primary: #D8A04B; } /* ---------- 1. Superficies base ---------- */ /* El tema traía el fondo en blanco puro; es lo único estructural que cambia. */ html, body, body.elementor-kit-14 { background-color: var(--gozo-crema); color: var(--gozo-gris); } ::selection { background: var(--gozo-dorado); color: var(--gozo-gris); } :focus-visible { outline: 2px solid var(--gozo-caramelo); outline-offset: 2px; } hr { border-color: var(--gozo-borde); } /* ---------- 2. Tipografía por defecto ---------- */ /* OJO: aquí NO va una regla global de h1-h6 ni de p. Un selector de tipo gana siempre a la herencia, así que pintar todos los titulares de marrón también los pintaba dentro de las secciones oscuras (la barra de avisos y el copyright del pie quedaban marrón sobre marrón, invisibles). El color de cuerpo lo pone body y se hereda: así una sección oscura que define su color se lo pasa a sus hijos y todo sigue funcionando. Los titulares en marrón se limitan a las zonas de contenido de WordPress, que siempre van sobre crema. */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .woocommerce-page .entry-title { color: var(--gozo-marron); } blockquote { border-inline-start: 3px solid var(--gozo-dorado); color: var(--gozo-marron); } code, kbd, pre { background: var(--gozo-crema-clara); color: var(--gozo-marron); } /* ---------- 3. Enlaces ---------- */ /* El kit original definía a:hover en el crema del sitio porque los enlaces vivían sobre secciones oscuras. Con el fondo de página ahora en crema, ese hover dejaba el enlace invisible. Se corrige a la misma especificidad que el kit. El subrayado dorado da la pista sin depender del contraste de color. */ a, .elementor-kit-14 a { color: var(--gozo-marron); text-decoration-color: var(--gozo-dorado); text-underline-offset: .18em; transition: color .18s ease, text-decoration-color .18s ease; } a:hover, .elementor-kit-14 a:hover { color: var(--gozo-caramelo); text-decoration-color: var(--gozo-caramelo); } /* Los enlaces que son contenedores (imágenes, tarjetas, botones, menú) no llevan subrayado: ahí el color lo pone Elementor. */ a:has(> img), .elementor-widget-image a, .elementor-button, .elementor-nav-menu a, .woocommerce-LoopProduct-link { text-decoration: none; } /* ---------- 4. Submenús desplegables ---------- */ /* Sólo el desplegable. El