/*! Theme Name: Engranaje Corporativo Theme URI: https://engranajecorporativo.com Description: Tema hijo de mymedi (ThemeSky) para el rediseño de Engranaje Corporativo. Aporta la capa visual (marca, header transparente sobre hero, footer de 4 columnas) sin tocar header.php ni footer.php del padre — esos siguen trayendo el carrito, el menú móvil y el sticky. Ver functions.php: mymedi_register_scripts() encola 'mymedi-style' con el style.css del tema ACTIVO (el de este hijo); ec_apuntar_mymedi_style_al_padre() lo reapunta al style.css del padre para que sí cargue. Template: mymedi Version: 1.5.10 Requires at least: 7.1 Requires PHP: 8.2 Text Domain: engranaje-hijo */ /* ========================================================================== AVISO — cómo se carga el CSS del padre y el de este hijo ========================================================================== mymedi encola 'mymedi-style' con get_stylesheet_uri() (framework/ theme_functions.php::mymedi_register_scripts(), prioridad 1000) — con este hijo activo, esa función de WordPress devuelve el style.css DEL HIJO, no el del padre. functions.php::ec_apuntar_mymedi_style_al_padre() (prioridad 1001) corrige el src de ese mismo handle para que cargue el style.css real del padre (510 KB, la maquetación base del tema) en su lugar. El style.css del hijo (este archivo) se encola aparte, con su propio handle ('ec-estilos-hijo', ec_encolar_estilos_hijo() en functions.php) — los dos cargan, cada uno una sola vez. Detalle completo, incluido el CSS dinámico del panel Redux, en la sección 1 de functions.php. ========================================================================== */ /* ========================================================================== Variables de marca ========================================================================== Colores extraídos de los PSD por muestreo de píxel — son exactos. --ec-naranja-hover es la única que no viene de muestreo: es un tono de hover sugerido sobre el naranja de marca, no un valor verificado. Regla de todo el archivo: los hex viven únicamente aquí, dentro de :root. Fuera de este bloque no se escriben hex sueltos — siempre var(--ec-*). Así, si la marca cambia un color, cambia en un solo sitio. ========================================================================== */ :root { /* Marca */ --ec-naranja: #FF4422; --ec-naranja-hover: #E63A1B; /* sugerido, no muestreado del PSD */ --ec-negro-footer: #1C1C1C; /* NO usar en texto -- salió de muestrear bordes suavizados en PNG (antialiasing), no es el color real del PSD. Las páginas de servicio y, desde esta ronda, Industrias usan los tokens de la sección "Texto de Servicios" más abajo, convertidos del PSD en sRGB; la regla genérica h1-h6 de este archivo también se corrigió a esos tokens. Sigue vivo solo por .ec-servicio-hero (más abajo): el color sólido de respaldo cuando el campo de imagen del hero está vacío, que no viene de ninguna medición de texto y no formaba parte de este encargo. Si ese último uso se quita algún día, esta variable ya no hace falta. */ --ec-negro-titulares: #111111; /* Fondo de las páginas del CATÁLOGO únicamente (tienda, categoría, producto) — no del resto del sitio. El valor anterior (#F8F8F8) fue un error de medición: salió de muestrear colores ya redondeados: al remuestrear sin redondear, el catálogo da #FAFAFA y Servicios, Contacto, Nosotros y Blog dan blanco puro (--ec-blanco). Esas secciones no deben depender de este valor — ver background-color en .ec-servicio-contenedor más abajo. */ --ec-fondo-claro: #FAFAFA; --ec-gris-lineas: #E8E8E8; /* Neutro de apoyo (blanco). No es un color "de marca" muestreado, pero vive aquí también para cumplir la regla de "ningún hex fuera de :root". */ --ec-blanco: #FFFFFF; /* -------------------------------------------------------------------- Texto de Servicios -- convertidos del PSD (Adobe RGB) a sRGB, ver adobeASrgb() en preview/real/verificar-psd.js. Usados por las tres páginas de servicio (Mantenimiento Especializado, Capacitación Técnica y Operativa, Venta de Refacciones) y, desde esta ronda, también por Industrias -- ya no usa --ec-gris-texto (retirado: salía de muestrear un PNG con antialiasing, y con esta ronda dejó de tener ningún uso real en el tema). -------------------------------------------------------------------- */ --ec-texto: #1C1C1C; /* títulos y texto de cuerpo */ --ec-texto-lista: #373737; /* iconos y listas */ --ec-texto-secundario: #6A6A6A; /* dirección, correo y teléfonos de la tarjeta de contacto */ --ec-negro-oficina: #000000; /* nombres de oficina en la tarjeta de contacto -- el PSD los da en negro puro, no en --ec-texto */ --ec-separador: #FF664A; /* separadores verticales de la banda de cierre */ /* Tipografía — Outfit (Google Font, SIL OFL), encolada desde functions.php::ec_enqueue_estilos(). Pesos 300/400/500/600/700. */ --ec-fuente-base: 'Outfit', sans-serif; --ec-peso-light: 300; --ec-peso-regular: 400; --ec-peso-medium: 500; --ec-peso-semibold: 600; --ec-peso-bold: 700; } /* ========================================================================== Base tipográfica ========================================================================== Se aplica también a .woocommerce a propósito, no solo a body: si no, la tienda se queda con la tipografía de mymedi mientras el resto del sitio ya usa Outfit, y el salto de una tipografía a otra entre catálogo y páginas de contenido se nota. ========================================================================== */ body, .woocommerce { font-family: var(--ec-fuente-base); font-weight: var(--ec-peso-regular); } h1, h2, h3, h4, h5, h6, .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4, .woocommerce h5, .woocommerce h6 { font-family: var(--ec-fuente-base); font-weight: var(--ec-peso-semibold); /* var(--ec-texto), no --ec-negro-titulares: ese token salió de muestrear un PNG con antialiasing (ver su aviso en :root) -- esta regla genérica es la que pintaba los títulos de Industrias con ese valor impreciso antes de que industrias.css la corrigiera por encima con su propio color (mismo criterio que .ec-servicio-titulo, que ya hacía este mismo override). */ color: var(--ec-texto); } /* ========================================================================== Tipografía y paleta reales de mymedi — en todo el sitio, no solo lo nuevo ========================================================================== Decisión de cliente: la fuente (Outfit) y la paleta nueva (naranja) van en TODA la web, también en las páginas que todavía conservan el diseño viejo de mymedi — no solo Servicios/Industrias. La sección "Base tipográfica" de arriba solo cubre body/h1-h6; el panel Redux del tema pone Bai Jamjuree con selectores propios en el menú, negritas, botones, etc. (font-family), y el naranja/verde azulado viejo en 30+ reglas (color/background/border). Sin esto, esas piezas se quedan en la tipografía y los colores viejos. ========================================================================== */ /* ===== GENERADO POR generar_tipografia_color.py -- INICIO (no editar a mano) ===== */ /* Fuente: preview/real/4-mymedi-dinamico.css (CSS que genera el panel Redux de mymedi, descargado del sitio en vivo -- ver el encargo). Selectores exactos, no transcritos a mano: para regenerar tras un cambio en ese panel, correr `python3 herramientas/generar_tipografia_color.py` desde _desarrollo/ -- reescribe esta sección completa, entre los marcadores de arriba y abajo. */ /* --- B1. Tipografía: 12 reglas font-family de mymedi, mismos selectores --- */ html, body, label, input, textarea, keygen, select, button, form table label, .ts-button.fa, li.fa, h3.product-name, .woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a, .font-body, body table.compare-list, .ts-product-brand-wrapper .item .heading-title { font-family: var(--ec-fuente-base); } ::-webkit-input-placeholder { font-family: var(--ec-fuente-base); } :-moz-placeholder { font-family: var(--ec-fuente-base); } ::-moz-placeholder { font-family: var(--ec-fuente-base); } :-ms-input-placeholder { font-family: var(--ec-fuente-base); } strong, .hightlight, .price, .cats-portfolio a, .woocommerce div.product .ts-shortcode p.price ins, .woocommerce div.product .ts-shortcode span.price ins, .ul-style-none li, .ts-search-result-container .view-all-wrapper a, .product-label-rectangle .product .product-label .onsale, .product-label-rectangle .product .product-label .new, .product-label-rectangle .product .product-label .featured, .product-label-rectangle .product .product-label .out-of-stock, .ts-list-of-product-categories-wrapper h3.heading-title, .widget_product_categories ul.product-categories > li > a, .footer-container .vc_custom_heading, .counter-wrapper > div, .widget_categories > ul > li, .widget_categories ul li.current-cat-ancestor > a, .widget_categories ul li.current-cat-parent > a, .widget_nav_menu ul > li, .widget_pages ul li, .ts-product-categories-widget > ul > li > a, .meta-content .sku-wrapper > span:first-child, .meta-content .brands-link > span:first-child, .meta-content .tags-link > span:first-child, .meta-content .cats-link > span:first-child, .woocommerce-cart .woocommerce-cart-form .woocommerce-Price-amount, .woocommerce-cart .cart-collaterals .woocommerce-Price-amount, .woocommerce-checkout .woocommerce-Price-amount, .woocommerce table.shop_table.order_details .woocommerce-Price-amount, .woocommerce ul#shipping_method .amount, .meta-content .portfolio-info > span:first-child, .ts-banner .banner-wrapper h2, .yith-wfbt-section .total_price_label, .woocommerce-grouped-product-list-item__price, .woocommerce-tabs .panel .block-image-2-columns li a { font-family: var(--ec-fuente-base); } .ts-header .menu-wrapper, .ts-header .menu-wrapper .sub-menu h1, .ts-header .menu-wrapper .sub-menu h2, .ts-header .menu-wrapper .sub-menu h3:not(.product-name), .ts-header .menu-wrapper .sub-menu h4, .ts-header .menu-wrapper .sub-menu h5, .ts-header .menu-wrapper .sub-menu h6, .ts-header .menu-wrapper nav > ul.menu > li, .ts-header .menu-wrapper nav > ul > li, .ts-header .menu-wrapper li.category-bold .sub-menu .ts-list-of-product-categories-wrapper ul li, .ts-header .menu-wrapper li.category-bold .sub-menu .ts-list-of-product-categories-wrapper + .ts-button-wrapper .ts-button, .mobile-menu-wrapper .ts-menu ul li:not(.font-body) { font-family: var(--ec-fuente-base); } .ts-header .menu-wrapper .sub-menu, .ts-header .menu-wrapper nav > ul.menu .sub-menu li, .ts-header .menu-wrapper nav > ul .sub-menu li, .mobile-menu-wrapper .ts-menu ul li.font-body, .mobile-menu-wrapper .ts-menu ul li .sub-menu { font-family: var(--ec-fuente-base); } a.button, button, input[type^="submit"], .ts-button, a.button-readmore, .ts-banner-button a, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled], .woocommerce #respond input#submit, .shopping-cart p.buttons a, .woocommerce .wishlist_table .product-add-to-cart a, .ts-header .ts-megamenu .ts-list-of-product-categories-wrapper .list-categories > ul:first-child, .woocommerce div.product .quantity label.ts-screen-reader-text, .woocommerce div.product form.cart .variations label, .more-less-buttons a, .ts-product-feature, body table.compare-list .add-to-cart td a, body table.compare-list .add-to-cart td a:not(.unstyled_button), .meta-wrapper-2 .quantity .screen-reader-text, input[type="submit"].dokan-btn, a.dokan-btn, .dokan-btn { font-family: var(--ec-fuente-base); } .font-bold, .ul-style.font-bold li, .ul-style-none.font-bold li, .tagcloud a, .tags-link a, .footer-container a.button.button-light, .ts-shortcode .load-more-wrapper .load-more, .ts-shop-load-more .load-more, .ts-portfolio-wrapper .cats-portfolio > a, .entry-meta-middle .date-time, .counter-wrapper > div .number > span, .meta-wrapper .stock-quantity > span, blockquote .author, blockquote cite, .author-info .author-role, .vc_custom_heading.font-normal strong, .mailchimp-subscription .subscribe-email .button, .list-categories ul.tabs li.current, .column-tabs ul.tabs li.current, body.wpb-js-composer .vc_general.vc_tta-tabs .vc_tta-tab.vc_active, .commentlist li.comment .entry-meta-top, .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta, .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong, .woocommerce .widget_price_filter .price_slider_amount .button, .woocommerce .woocommerce-widget-layered-nav-dropdown .woocommerce-widget-layered-nav-dropdown__submit, .woocommerce-page .widget_price_filter .price_slider_amount .button, .woocommerce-tabs table tbody > tr > td, .comment-meta .edit, .comment-meta .reply, .woocommerce-Address-title a.edit, .logged-in-as > a, h3.font-normal strong, .widget_categories ul ul li.current-cat, .widget_categories ul ul li.current-cat-ancestor > a, .widget_categories ul ul li.current-cat-parent > a, .ts-product-categories-widget ul ul li.current > a, .ts-product-categories-widget ul li.cat-parent.active > a, #main-content .woocommerce.columns-1 > .products .product .meta-wrapper > .product-name, #main-content .woocommerce:not(.columns-1) > .products .product .meta-wrapper > .product-name:not(:first-child), .woocommerce #review_form #respond .comment-reply-title, .filter-widget-area-button a, .woocommerce .woocommerce-ordering .orderby-current, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce #review_form #respond #commentform label, .woocommerce table.shop_table th, .cart-collaterals .cart_totals table.shop_table tbody tr.shipping td:before, .cart-collaterals .cart_totals table.shop_table tbody tr.cart-subtotal td:before, .cart-collaterals .cart_totals table.shop_table tbody tr.order-total td:before, .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before, .wishlist_table .product-price, .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, table.my_account_orders .amount, table.my_account_orders .woocommerce-orders-table__cell-order-number, .widget_price_filter .price_slider_amount .button, .woocommerce-account .woocommerce-MyAccount-navigation li.is-active, .woocommerce div.product div.summary .availability, .woocommerce div.product div.summary form.cart .variations select, .ts-product-attribute div.option:not(.color) a, div.product .single-navigation > a > span, .woocommerce div.product .yith-wfbt-items .price > .amount, div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton.checked + a, div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton.checked + .product-name, .ts-write-a-review-button, .yith-wfbt-section .total_price, .ts-portfolio-wrapper .filter-bar li.current, .product-filter-by-brand ul li.selected label, .product-filter-by-price ul li.chosen label, .product-filter-by-availability ul li input[checked="checked"] + label, .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a, .header-top .header-left strong, .wishlist_table .amount, .woocommerce-error strong, .woocommerce-info strong, .woocommerce-message strong, .woocommerce-error a, .woocommerce-info a, .woocommerce-message a, .ts-banner .banner-wrapper .discount, .meta-wrapper-2 > .price { font-family: var(--ec-fuente-base); } header .logo-wrapper .logo a, div.product .yith-wfbt-section .yith-wfbt-images td:not(:last-child) > a:after { font-family: var(--ec-fuente-base); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .woocommerce-cart .cart-collaterals .cart_totals > h2 { font-family: var(--ec-fuente-base); } /* --- B2. Paleta: 31 reglas de color de mymedi, mismos selectores y propiedades --- */ a:hover, a:active, a:focus, .ts-header .menu-wrapper ul li.nopd:hover:before, .ts-header .menu-wrapper ul li.nopd:hover > a:not(.button), .woocommerce-MyAccount-content a:hover { color: var(--ec-naranja); } .counter-wrapper > div .number > span, .sale-label > .wpb_wrapper { background: var(--ec-naranja); } .my-wishlist-wrapper > a .wishlist-number, .shopping-cart-wrapper .cart-control .cart-number { background: var(--ec-naranja-hover); } .header-v5 .my-wishlist-wrapper > a .wishlist-number, .header-v5 .shopping-cart-wrapper .cart-control .cart-number { background: var(--ec-naranja); } .shopping-cart-wrapper svg path, .my-wishlist-wrapper svg path, .search-button svg path, .my-account-wrapper svg path, .header-transparent.header-text-light .header-template > div:not(.is-sticky) .shopping-cart-wrapper:hover svg path, .header-transparent.header-text-light .header-template > div:not(.is-sticky) .my-wishlist-wrapper:hover svg path, .header-transparent.header-text-light .header-template > div:not(.is-sticky) .search-button:hover svg path, .header-transparent.header-text-light .header-template > div:not(.is-sticky) .my-account-wrapper:hover svg path { stroke: var(--ec-naranja); } .header-transparent.header-text-light .header-template > div:not(.is-sticky) .ic-mobile-menu-button:hover svg path { fill: var(--ec-naranja); } .hightlight, .secondary-color, .secondary-color h1, .secondary-color h2, .secondary-color h3, .secondary-color h4, .secondary-color h5, .secondary-color h6, .secondary-color .h1, .secondary-color .h2, .secondary-color .h3, .secondary-color .h4, .secondary-color .h5, .secondary-color .h6, .ul-style-none.secondary-color li, .ul-style.icon-secondary li:before, .ol-style.icon-secondary li:before, .header-v5 .ts-store-notice, .search-button:hover .icon:before, .shopping-cart-wrapper:hover a > .ic-cart:before, .ts-tiny-account-wrapper:hover .account-control:before, .my-wishlist-wrapper:hover a:before, .ts-floating-sidebar .close:hover:after, .ts-popup-modal .close:hover, body #cboxClose:hover:after, html body > h1 a.close:hover, #ts-product-360-modal .close:hover:after, #ts-quickshop-modal span.close:hover, #ts-add-to-cart-popup-modal span.close:hover, body table.compare-list tr.remove td > a:hover, .woocommerce table.shop_table .product-remove:hover a:before, .cart_list li .cart-item-wrapper a.remove:hover:before, .woocommerce .widget_shopping_cart .cart_list li a.remove:hover:before, .woocommerce.widget_shopping_cart .cart_list li a.remove:hover:before, body table.compare-list tr.remove td > a:hover .remove:before, body .pp_pic_holder a.pp_close:hover, .ts-header .menu-wrapper ul li:hover, .header-v5 .ts-header .menu-wrapper ul li:hover, .woocommerce div.product .summary > form.cart .button.single_add_to_cart_button.loading:after, .woocommerce #main-content.ts-col-24 div.product.summary-2-columns:not(.images-summary-background) .summary-column-2 .button.loading:after, .header-language a:hover, .header-currency a:hover, body .wpml-ls-legacy-dropdown a:hover, body .wpml-ls-legacy-dropdown a:focus, body .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a, body .wpml-ls-legacy-dropdown-click a:hover, body .wpml-ls-legacy-dropdown-click a:focus, body .wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover>a, .my-account-wrapper a:hover, .shopping-cart-wrapper a:hover, h3.product-name:hover, .search-button:hover:before, .header-v5 .header-language a:hover, body.header-v5 .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover, body.header-v5 .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:hover, .header-v5 .header-currency a:hover, .widget_categories li.current-cat > a, .widget_categories ul li.current-cat-ancestor > a, .widget_categories ul li.current-cat-parent > a, .ts-product-categories-widget ul li.current, .ts-product-categories-widget li.cat-parent.active > a, .yith-wfbt-section .total_price, .yith-wfbt-section .total_price .woocommerce-Price-amount, #main-content .woocommerce.columns-1 .product .meta-wrapper-2 .price, .woocommerce div.product .summary .price, .meta-content .cats-link a:hover, .meta-content .tags-link a:hover, .product .product-brands a:hover, .woocommerce .products .product .product-categories a:hover, .product-filter-by-brand ul li:hover label, .product-filter-by-availability ul li:hover label, .product-filter-by-price ul li:hover label, .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a:hover, .woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover, .woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover .ts-tooltip, .woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover:before, .woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover .ts-tooltip:before, .woocommerce div.product div.summary a.compare:hover, .woocommerce div.product div.summary a.compare:hover:before, .woocommerce table.compare-list a.button.loading:after, .woocommerce div.product div.summary a.compare:hover .ts-tooltip, .woocommerce div.product div.summary a.compare:hover .ts-tooltip:before, .woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover a, .woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover a:before, .woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover .ts-tooltip, .woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover .ts-tooltip:before { color: var(--ec-naranja); } .woocommerce > form.checkout #order_review, .product-filter-by-color ul li a:before, .ts-product-attribute div.option.color a:before, .product-wrapper .color-swatch > div:before, div.product .yith-wfbt-section .yith-wfbt-form, .woocommerce-account .woocommerce-MyAccount-navigation li:hover, .woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-color: var(--ec-naranja); } .woocommerce-page.archive .woocommerce > .ts-product.ts-slider .products .owl-stage-outer, .woocommerce .ts-product-deals-wrapper:not(.ts-slider) .products, .woocommerce .ts-product-deals-wrapper.ts-slider .products .owl-stage-outer, .woocommerce.columns-1 .ts-product-deals-wrapper.ts-slider .products, .entry-content .woocommerce .ts-product:not(.ts-slider) .products, .entry-content .woocommerce .ts-product.ts-slider .products .owl-stage-outer, .product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .owl-stage-outer:before, .product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .owl-stage-outer:after, .product-style-3 .woocommerce .ts-product-deals-wrapper .products .owl-stage-outer:after, .product-style-3 .woocommerce .ts-product-deals-wrapper .products .owl-stage-outer:before { border-color: var(--ec-naranja) !important; } .product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .product:not(.product-category), .product-style-3 .ts-product-deals-wrapper.ts-slider .products .product:not(.product-category) { border-left-color: var(--ec-naranja) !important; } .rtl.product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .product:not(.product-category) { border-right-color: var(--ec-naranja) !important; } nav > ul.menu li > a .menu-label:before, nav > ul.menu ul.sub-menu li a:hover, .ts-menu ul li.current-menu-item > a, .ts-menu ul li.current_page_parent > a, .ts-menu ul li.current-menu-parent > a, .ts-menu ul li.current_page_item > a, .ts-menu ul li.current-menu-ancestor > a, .ts-menu ul li.current-page-ancestor > a, .ts-menu ul li.current-product_cat-ancestor > a, .ts-menu ul li.current-menu-item .ts-menu-drop-icon, .ts-menu ul li.current_page_parent .ts-menu-drop-icon, .ts-menu ul li.current-menu-parent .ts-menu-drop-icon, .ts-menu ul li.current_page_item .ts-menu-drop-icon, .ts-menu ul li.current-menu-ancestor .ts-menu-drop-icon, .ts-menu ul li.current-page-ancestor .ts-menu-drop-icon, .ts-menu ul li.current-product_cat-ancestor .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current-menu-item > a, .ts-menu ul .sub-menu li.current_page_parent > a, .ts-menu ul .sub-menu li.current-menu-parent > a, .ts-menu ul .sub-menu li.current_page_item > a, .ts-menu ul .sub-menu li.current-menu-ancestor > a, .ts-menu ul .sub-menu li.current-page-ancestor > a, .ts-menu ul .sub-menu li.current-product_cat-ancestor > a, .ts-menu ul .sub-menu li.current-menu-item .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current_page_parent .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current-menu-parent .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current_page_item .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current-menu-ancestor .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current-page-ancestor .ts-menu-drop-icon, .ts-menu ul .sub-menu li.current-product_cat-ancestor .ts-menu-drop-icon, .ts-floating-sidebar a:hover { color: var(--ec-naranja); } .menu-sub-label, .product-style-3.woocommerce-page.archive .woocommerce > .ts-product.ts-slider .products .owl-stage-outer .product .product-wrapper:before, .product-style-3 .woocommerce .ts-product-deals-wrapper:not(.ts-slider) .products .product .product-wrapper:before, .product-style-3 .woocommerce .ts-product-deals-wrapper.ts-slider .products .owl-stage-outer .product .product-wrapper:before, .product-style-3 .woocommerce.columns-1 .ts-product-deals-wrapper.ts-slider .products .product .product-wrapper:before, .product-style-3 .entry-content .woocommerce .ts-product:not(.ts-slider) .products .product .product-wrapper:before, .product-style-3 .entry-content .woocommerce .ts-product.ts-slider .products .owl-stage-outer .product .product-wrapper:before { background-color: var(--ec-naranja); } .menu-sub-label:before { border-left-color: var(--ec-naranja); border-right-color: var(--ec-naranja); } a.button, button, input[type^="submit"], .ts-button, a.button-readmore, .ts-banner-button a, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit, .woocommerce #payment #place_order, .woocommerce-page #payment #place_order, .dropdown-footer > a.button.view-cart:hover, .woocommerce .dropdown-footer > a.button.view-cart:hover, .shopping-cart p.buttons a, .woocommerce div.product .summary a.compare, .woocommerce div.product .summary .yith-wcwl-add-to-wishlist a, .more-less-buttons a, body table.compare-list .add-to-cart td a, body table.compare-list .add-to-cart td a:not(.unstyled_button), input[type="submit"].dokan-btn, a.dokan-btn, .dokan-btn, .button.button-light:hover, a.button.button-light:hover, .product-category .meta-wrapper a.button:hover, .ts-shortcode .shop-more a.button:hover, .ts-shortcode .show-all-button a.button:hover, .woocommerce div.product div.summary form.cart .button, .woocommerce .wishlist_table .product-add-to-cart a:hover, .woocommerce .wishlist_table .product-add-to-cart a.alt:hover, .product-style-3 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button, .product-style-4 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button, .woocommerce .widget_shopping_cart .buttons a:first-child:hover, .woocommerce.widget_shopping_cart .buttons a:first-child:hover, .woocommerce .wc-proceed-to-checkout .button.checkout-button { border-color: var(--ec-naranja); background: var(--ec-naranja); } a.button:hover, button:hover, input[type^="submit"]:hover, .ts-button:hover, a.button-readmore:hover, .ts-banner-button a:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit:hover, .woocommerce #payment #place_order:hover, .woocommerce-page #payment #place_order:hover, .dropdown-footer > a.button.view-cart, .woocommerce .dropdown-footer > a.button.view-cart, .shopping-cart p.buttons a:hover, .woocommerce div.product .summary a.compare:hover, .woocommerce div.product .summary .yith-wcwl-add-to-wishlist a:hover, .more-less-buttons a:hover, body table.compare-list .add-to-cart td a:hover, body table.compare-list .add-to-cart td a:not(.unstyled_button):hover, .woocommerce div.product div.summary form.cart .button:hover, .product-style-3 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button:hover, .product-style-4 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button:hover, .woocommerce .widget_shopping_cart .buttons a:first-child, .woocommerce.widget_shopping_cart .buttons a:first-child, input[type="submit"].dokan-btn:hover, a.dokan-btn:hover, .dokan-btn:hover, .woocommerce .wc-proceed-to-checkout .button.checkout-button:hover { border-color: var(--ec-naranja); color: var(--ec-naranja); } .ts-button-wrapper.button-text a.ts-button:hover, .ts-header .menu-wrapper ul li:hover .ts-button-wrapper.button-text a.ts-button:hover { color: var(--ec-naranja); } .product-style-2 .product-group-button > div.loop-add-to-cart a, .woocommerce.main-products:not(.columns-1) > .products .product-group-button-meta > div.loop-add-to-cart a { border-color: var(--ec-naranja) !important; background: var(--ec-naranja) !important; } .product-style-2 .product-group-button > div.loop-add-to-cart a:hover, .woocommerce.main-products:not(.columns-1) > .products .product-group-button-meta > div.loop-add-to-cart a:hover { color: var(--ec-naranja) !important; border-color: var(--ec-naranja) !important; } .product-style-2 .product-group-button > div.loop-add-to-cart .button.loading:after, .product-group-button-meta > div.loop-add-to-cart .button.loading:after { color: var(--ec-naranja); } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel-title>a, div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton:before { background-color: var(--ec-naranja); } .ts-store-notice { background: var(--ec-naranja); } .ts-header .header-middle .header-right .menu-wrapper nav > ul.menu > li:first-child:hover, .ts-header .header-middle .header-right .menu-wrapper nav > ul > li:first-child:hover { color: var(--ec-naranja); } .group_table ins, .price ins, .product-price ins, .ts-shortcode .price ins, .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, .price ins .woocommerce-Price-amount, .yith-wfbt-items .price ins, .yith-wfbt-items .price ins .woocommerce-Price-amount { color: var(--ec-naranja); } .woocommerce p.stars:hover a, .woocommerce p.stars.selected a, .woocommerce .star-rating span:before, .ts-testimonial-wrapper .rating span:before, blockquote .rating span:before { color: var(--ec-naranja); } .woocommerce .product .product-label .onsale { background: var(--ec-naranja); } .woocommerce .product .product-label .new { background: var(--ec-naranja-hover); } .mobile-menu-wrapper .ic-mobile-menu-close-button svg path, .menu-mobile-active .ts-group-icons-header .ts-group-meta-icon-toggle svg path { fill: var(--ec-naranja); } @media only screen and (min-width: 1279px) { .product-group-button > div a:hover:after, .woocommerce .product-group-button a.button.loading:hover:before, .woocommerce .product-group-button button.button.loading:hover:before, .woocommerce .product-group-button input.button.loading:hover:before, .woocommerce .product-group-button a.button.loading:hover:after, .woocommerce .product-group-button button.button.loading:hover:after, .woocommerce .product-group-button input.button.loading:hover:after, .woocommerce .product-group-button a.button.added:hover:before, .woocommerce .product-group-button button.button.added:hover:before, .woocommerce .product-group-button input.button.added:hover:before, .product-group-button-meta > div a:hover:after, .woocommerce .product-group-button-meta a.button.loading:hover:before, .woocommerce .product-group-button-meta button.button.loading:hover:before, .woocommerce .product-group-button-meta input.button.loading:hover:before, .woocommerce .product-group-button-meta a.button.loading:hover:after, .woocommerce .product-group-button-meta button.button.loading:hover:after, .woocommerce .product-group-button-meta input.button.loading:hover:after, .woocommerce .product-group-button-meta a.button.added:hover:before, .woocommerce .product-group-button-meta button.button.added:hover:before, .woocommerce .product-group-button-meta input.button.added:hover:before { color: var(--ec-naranja); } } input[type="submit"].dokan-btn-default, a.dokan-btn-default, .dokan-btn-default, body .wp-core-ui .button.button-primary { border-color: var(--ec-naranja); background: var(--ec-naranja); } input[type="submit"].dokan-btn-default:hover, a.dokan-btn-default:hover, .dokan-btn-default:hover, input[type="submit"].dokan-btn-default:focus, a.dokan-btn-default:focus, .dokan-btn-default:focus, input[type="submit"].dokan-btn-default:active, a.dokan-btn-default:active, .dokan-btn-default:active, input[type="submit"].dokan-btn-default.active, a.dokan-btn-default.active, .dokan-btn-default.active, .open .dropdown-toggleinput[type="submit"].dokan-btn-default, .open .dropdown-togglea.dokan-btn-default, .open .dropdown-toggle.dokan-btn-default, body .wp-core-ui .button.button-primary.focus, body .wp-core-ui .button.button-primary.hover, body .wp-core-ui .button.button-primary:focus, body .wp-core-ui .button.button-primary:hover, input[type="submit"].dokan-btn-default.disabled, a.dokan-btn-default.disabled, .dokan-btn-default.disabled, input[type="submit"].dokan-btn-default[disabled], a.dokan-btn-default[disabled], .dokan-btn-default[disabled], fieldset[disabled] input[type="submit"].dokan-btn-default, fieldset[disabled] a.dokan-btn-default, fieldset[disabled] .dokan-btn-default, input[type="submit"].dokan-btn-default.disabled:hover, a.dokan-btn-default.disabled:hover, .dokan-btn-default.disabled:hover, input[type="submit"].dokan-btn-default[disabled]:hover, a.dokan-btn-default[disabled]:hover, .dokan-btn-default[disabled]:hover, fieldset[disabled] input[type="submit"].dokan-btn-default:hover, fieldset[disabled] a.dokan-btn-default:hover, fieldset[disabled] .dokan-btn-default:hover, input[type="submit"].dokan-btn-default.disabled:focus, a.dokan-btn-default.disabled:focus, .dokan-btn-default.disabled:focus, input[type="submit"].dokan-btn-default[disabled]:focus, a.dokan-btn-default[disabled]:focus, .dokan-btn-default[disabled]:focus, fieldset[disabled] input[type="submit"].dokan-btn-default:focus, fieldset[disabled] a.dokan-btn-default:focus, fieldset[disabled] .dokan-btn-default:focus, input[type="submit"].dokan-btn-default.disabled:active, a.dokan-btn-default.disabled:active, .dokan-btn-default.disabled:active, input[type="submit"].dokan-btn-default[disabled]:active, a.dokan-btn-default[disabled]:active, .dokan-btn-default[disabled]:active, fieldset[disabled] input[type="submit"].dokan-btn-default:active, fieldset[disabled] a.dokan-btn-default:active, fieldset[disabled] .dokan-btn-default:active, input[type="submit"].dokan-btn-default.disabled.active, a.dokan-btn-default.disabled.active, .dokan-btn-default.disabled.active, input[type="submit"].dokan-btn-default[disabled].active, a.dokan-btn-default[disabled].active, .dokan-btn-default[disabled].active, fieldset[disabled] input[type="submit"].dokan-btn-default.active, fieldset[disabled] a.dokan-btn-default.active, fieldset[disabled] .dokan-btn-default.active { border-color: var(--ec-naranja); color: var(--ec-naranja); } /* ===== GENERADO POR generar_tipografia_color.py -- FIN ===== */ /* ========================================================================== Header — geometría del PSD y transparencia sobre el hero ========================================================================== HALLAZGO (verificado en vivo, 9 sep 2026): mymedi trae el header transparente de FORMA NATIVA -- estas son sus reglas reales, copiadas de su CSS en vivo: .header-transparent .header-template { position: absolute; z-index: 993; left: 0; right: 0; top: 0; } .header-transparent .header-template > div:not(.is-sticky) .header-middle, .header-transparent .header-template > .header-middle { background: transparent; } .header-transparent .header-template > div:not(.is-sticky) .header-middle:after, .header-transparent .header-template > .header-middle:after { display: none; } .header-transparent .header-middle, .is-sticky .header-sticky { border-width: 0; } .header-transparent/.header-text-light son clases que el propio mymedi pondría en un ancestro de .header-template si el panel Redux tuviera activado un ajuste de "header transparente" -- NO es el caso hoy (no aparecen en el HTML en vivo, ver header-vivo.html), así que el bloque RESPALDO de abajo replica el mismo resultado colgado de nuestra propia clase de body, sin depender de encontrar ese ajuste. ========================================================================== */ /* -------------------------------------------------------------------------- RESPALDO — réplica de la transparencia nativa de arriba, sobre el hero -------------------------------------------------------------------------- Colgado de body.ec-header-transparente (la clase que ya pone ec_body_class_header_transparente() en functions.php). El patrón "> div:not(.is-sticky)" es el mismo que usa mymedi: .header-template envuelve a .header-middle en un div (.sticky-wrapper, ver el encargo) que recibe la clase .is-sticky por JS propio del tema al hacer scroll -- sin esta condición la transparencia se quedaría encendida también en sticky. */ body.ec-header-transparente .ts-header .header-template { position: absolute; z-index: 993; /* mismo valor que mymedi, para no chocar con otros elementos posicionados del tema */ left: 0; right: 0; top: 0; } body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle { background: transparent; } body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle:after { display: none; } /* Cuenta y buscador en blanco sobre el hero -- réplica fiel del comportamiento nativo de mymedi (.header-text-light), visibles cuando se apague EC_MODO_CATALOGO. El carrito no se toca: bajo EC_MODO_CATALOGO se oculta por completo, ver el bloque MODO CATÁLOGO más abajo. */ body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .my-account-wrapper svg path, body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .search-button svg path { stroke: var(--ec-blanco); } body.ec-header-transparente .ts-header .header-middle, body.ec-header-transparente .ts-header .is-sticky .header-sticky { border-width: 0; } /* -------------------------------------------------------------------------- Geometría — igual en los tres estados del encargo (hero/sticky/sin hero) -------------------------------------------------------------------------- mymedi mete el logo y el menú en .header-middle > .container, un display:table con .logo-wrapper/.header-right como table-cell (verificado en vivo). Aquí se cambia a flexbox para fijar la geometría exacta del PSD -- sin gancho de body: el diseño pide el mismo layout en los tres estados, solo el COLOR cambia por estado (ver más abajo). */ /* .header-top es la barra superior de mymedi (contacto/idioma/etc.) -- el diseño de una sola banda no la usa, en ninguno de los tres estados. Se oculta en vez de quitarla del marcado para no tocar header.php. */ .ts-header .header-template .header-top { display: none; } .ts-header .header-middle > .container { /* width/max-width/margin anulan ".page-container,.container{margin:auto}" + "@media(min-width:1279px){.container{width:1270px}}" (1-reset.css): esa es la clase GENÉRICA de mymedi para centrar el contenido de la página a 1270px -- el propio .container del header la hereda porque es la misma clase, y con ella el header quedaba centrado en vez de a todo el ancho, y el % de la izquierda del menú (más abajo) salía mal medido desde ese recuadro angosto en vez de desde el header completo. */ width: 100%; max-width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; /* empuja .header-right (hamburguesa en tablet/móvil) al borde derecho */ height: 125px; /* 36 + 53 (logo) + 36 -- ver el encargo */ padding: 0 38px; /* logo a x=38 -- el "padding:0 50px" nativo no da esa medida */ box-sizing: border-box; } .ts-header .header-middle .logo-wrapper { width: auto; /* anula el 25%/20% de .header-v7 (ver 2-mymedi.css) -- el flex ya reparte solo */ height: auto; /* anula los 80px nativos de "header .logo-wrapper" (pensados para su logo de 144×80) -- con eso puesto, el flex centraba una caja de 80px, no la imagen de 53px, y el logo quedaba más arriba de lo que pide el PSD. Este "auto" en concreto nunca decide nada por sí solo -- la regla de abajo (5 clases) le gana siempre, en cualquier estado, y fija el valor real -- se deja igual que las demás propiedades de esta caja, por si esa regla de más abajo cambiara algún día. */ padding-right: 0; /* anula los 15px nativos de esa misma regla */ position: relative; /* ancla el logo azul (.ec-logo-color-link, más abajo) al mismo cuadro que .logo, arreglo 1.5.3 -- ver la sección Logos */ } /* mymedi tiene TODAVÍA otra altura fija para .logo-wrapper (70px, "header .sticky-wrapper.is-sticky .header-sticky .logo-wrapper" -- 4 clases + 1 etiqueta = más que la regla de arriba, 3 clases) que volvía a descentrar el logo verticalmente. .has-sticky (en
) y .header-sticky (en .header-middle) son clases reales del propio marcado (ver el encargo), añadidas aquí solo para sumar especificidad -- con ellas, 5 clases, le ganan sin !important. mymedi las llama "sticky", pero OJO: las dos son ESTÁTICAS (.has-sticky sale con solo tener el header fijo HABILITADO en el panel -- siempre, ver cabecera-ajustes.php; .header-sticky ya viene así en el marcado, ver header-v7.php) -- esta regla gana SIEMPRE, con scroll o sin él, no solo "en sticky" como sugiere su selector. Por eso el valor real de .logo-wrapper (en cualquier estado) es el que se fije AQUÍ, no el "auto" de la regla de arriba (3 clases, nunca gana). 53px (no auto) desde el arreglo 1.5.3 del logo azul: con los tres nativos del logo apagados (Caso 1 de la sección Logos, más abajo), .logo se queda sin ningún visible pero SIGUE aportando una línea fantasma (~26px, la métrica heredada de su propio line-height, no de ningún ) -- auto tomaba esa altura fantasma en vez de los 53px reales y descentraba tanto a .logo-wrapper como al logo azul (.ec-logo-color-link, anclado contra ESE cuadro) verticalmente, ~13px de más. 53px -- la altura real de los CUATRO del logo, sea cual sea el que esté encendido -- no depende de qué haya visible adentro. */ .ts-header.has-sticky .header-middle.header-sticky .logo-wrapper { height: 53px; } .ts-header .header-middle .logo-wrapper img.normal-logo, .ts-header .header-middle .logo-wrapper img.mobile-logo, .ts-header .header-middle .logo-wrapper img.sticky-logo { /* SIN "display" a propósito -- es justo la propiedad que alterna la sección "Logos" más abajo (show/hide de mymedi + Casos 1 y 2) para decidir cuál de los tres se ve; ponerlo aquí, aunque fuera el mismo valor que ya tuviera, le habría ganado a esas reglas por especificidad y habría dejado los tres logos encimados. */ width: 97px; height: 53px; } /* ec-logo-color-link -- arreglo 1.5.3, ver header-v7.php. No es uno de los tres nativos de mymedi_theme_logo(): lleva su propio (esa función es del padre y no puede envolver un cuarto , ver el encargo), superpuesto al mismo cuadro con position:absolute contra .logo-wrapper (position:relative, arriba) en vez de depender del flujo -- así no hereda "header .logo-wrapper .logo a" (font-size/ line-height/vertical-align, pensados para ESE , no para este) ni depende de si .logo (vacío en el estado donde este logo se usa, los tres nativos apagados) deja o no hueco antes de él. display:none por omisión Y explícito: a diferencia de normal-logo/ mobile-logo/sticky-logo (con un valor por omisión nativo de mymedi, ver la sección Logos), esta clase es nueva -- sin este resguardo se vería en cualquier estado. La sección Logos, más abajo, la enciende solo donde corresponde (páginas sin cabecera transparente, sin scroll). width/height 97×53 TAMBIÉN aquí, no solo en el de abajo: sin un ancho propio, este (position:absolute, sin "right") se resuelve a su contenido -- y "img{max-width:100%}" (reset.css nativo) calcula ese 100% CONTRA este mismo cuadro, todavía sin ancho en ese momento del cálculo. Verificado en vivo: sin esta regla, el de adentro medía 0px de ancho (max-width:100% de un contenedor sin ancho propio) pese a su "width:97px" -- círculo que un ancho fijo aquí rompe. */ .ts-header .header-middle .logo-wrapper .ec-logo-color-link { display: none; position: absolute; top: 0; left: 0; width: 97px; height: 53px; } .ts-header .header-middle .logo-wrapper .ec-logo-color { /* Mismo cuadro que normal-logo/mobile-logo/sticky-logo, arriba -- medido también contra el PNG de la ficha de producto (Catálogo/ Vistas Catálogo/CatálogoProducto.png: ~99×56 a 1440, ±2px, mismo criterio de tolerancia que el resto de este archivo). */ width: 97px; height: 53px; display: block; } /* .menu-wrapper es position:relative NATIVO (mymedi) -- eso es justo lo que rompía el centrado del menú antes de esta ronda: un position:absolute en el