/** * Section Context — colores por sección (Ventilación / Enfriamiento / Sistemas Adicionales / Producto). * * Los tokens se definen según la clase de sección en y se aplican * sobre dos zonas: * 1. El header global de Elementor (.campagnoni-header) — fondo, menú y logo. * 2. El hero de categoría (.header-encabezado-categoria) — fondo y títulos. * * En singles de producto el tiene dos clases (p. ej. * `seccion-ventilacion` + `seccion-producto`); el bloque de tokens de * `seccion-producto` va al final para pisar por orden de cascada. * * Fuera de las secciones .seccion-ventilacion / .seccion-enfriamiento / * .seccion-sistemas-adicionales / .seccion-producto, el header y el hero * conservan el estilo de Elementor. * * El logo SVG usa siempre var(--color-dark-blue) en cualquier sección. */ /* ---- Tokens por sección ---------------------------------------------- */ body.seccion-ventilacion { --seccion-header-bg: var(--color-light-petrol); --seccion-header-text: #212121B2; } body.seccion-enfriamiento { --seccion-header-bg: var(--color-light-green); --seccion-header-text: #212121B2; } body.seccion-sistemas-adicionales { --seccion-header-bg: var(--color-light-red); --seccion-header-text: #212121B2; } /* Producto va después: cuando coexiste con ventilación/enfriamiento/sistemas, gana. */ body.seccion-producto { --seccion-header-bg: var(--color-white); --seccion-header-text: #212121B2; } /* ---- Header global de Elementor -------------------------------------- */ /* Fondo del header */ body.seccion-ventilacion .campagnoni-header, body.seccion-enfriamiento .campagnoni-header, body.seccion-sistemas-adicionales .campagnoni-header, body.seccion-producto .campagnoni-header { background-color: var(--seccion-header-bg) !important; } /* Texto del menú (no incluye el logo — el logo tiene su propia regla abajo) */ body.seccion-ventilacion .campagnoni-header, body.seccion-ventilacion .campagnoni-header a, body.seccion-ventilacion .campagnoni-header .elementor-item, body.seccion-enfriamiento .campagnoni-header, body.seccion-enfriamiento .campagnoni-header a, body.seccion-enfriamiento .campagnoni-header .elementor-item, body.seccion-sistemas-adicionales .campagnoni-header, body.seccion-sistemas-adicionales .campagnoni-header a, body.seccion-sistemas-adicionales .campagnoni-header .elementor-item, body.seccion-producto .campagnoni-header, body.seccion-producto .campagnoni-header a, body.seccion-producto .campagnoni-header .elementor-item { color: var(--seccion-header-text) !important; } /* Logo: siempre azul oscuro en todas las secciones. El SVG usa fill="currentColor", así que basta con setear `color`. */ body.seccion-ventilacion .campagnoni-header .campagnoni-logo svg, body.seccion-enfriamiento .campagnoni-header .campagnoni-logo svg, body.seccion-sistemas-adicionales .campagnoni-header .campagnoni-logo svg, body.seccion-producto .campagnoni-header .campagnoni-logo svg { color: var(--color-dark-blue) !important; /*define el color para el icono de menu en mobile*/ fill: var(--color-dark-blue) !important; } /* ---- Hero de categoría ----------------------------------------------- */ body.seccion-ventilacion .header-encabezado-categoria, body.seccion-enfriamiento .header-encabezado-categoria, body.seccion-sistemas-adicionales .header-encabezado-categoria { background-color: var(--seccion-header-bg) !important; } /* Texto del hero: título (heading) y descripción (text-editor). Elementor le aplica al widget de texto su propio color con mayor especificidad, por eso se lo apunta explícitamente además del heading. */ body.seccion-ventilacion .header-encabezado-categoria, body.seccion-ventilacion .header-encabezado-categoria .elementor-heading-title, body.seccion-ventilacion .header-encabezado-categoria .elementor-widget-text-editor, body.seccion-enfriamiento .header-encabezado-categoria, body.seccion-enfriamiento .header-encabezado-categoria .elementor-heading-title, body.seccion-enfriamiento .header-encabezado-categoria .elementor-widget-text-editor, body.seccion-sistemas-adicionales .header-encabezado-categoria, body.seccion-sistemas-adicionales .header-encabezado-categoria .elementor-heading-title, body.seccion-sistemas-adicionales .header-encabezado-categoria .elementor-widget-text-editor { color: var(--seccion-header-text) !important; }