/* =========================================================================================== MODO OSCURO — la parte que es igual en todos los sitios oscuros. Está apagado por partida doble: la hoja se carga sólo cuando el parámetro "Modo oscuro" del sitio está encendido, y además nada pinta si el no lleva la clase "sitio-oscuro". Las dos cosas las pone head.php. Un tenant en modo oscuro NO copia más estas reglas en su custom.css: define su paleta (los diez colores de acá abajo) y, si en algo se aparta del esquema, pisa la variable de ese punto. Nada más. Hay dos familias de sitios oscuros: la dorada (bodyadvance, emantoni: precios y enlaces en acento) y la de marca (hidleds, piledtas: precios blancos). Donde no coinciden, la hoja no elige por ellas: usa una variable --oscuro-x-… con el papel mayoritario por defecto, y el tenant que difiere la pisa. Generado a partir de lo que ya hacían a mano bodyadvance, emantoni, hidleds, piledtas. Se regenera con scratchpad/generar-modo-oscuro.js, que deja además modo-oscuro-variables.json. =========================================================================================== */ :where(html.sitio-oscuro) { /* La paleta. Un sitio la pisa en su custom.css con los colores de su marca. */ --oscuro-fondo: #0d0d0d; /* El fondo del sitio */ --oscuro-panel: #161616; /* Las superficies que se despegan del fondo (tarjetas, paneles, menús) */ --oscuro-panel-2: #1d1d1d; /* Un segundo nivel de superficie, para lo que va encima de un panel */ --oscuro-borde: #2a2a2a; /* Los bordes y separadores */ --oscuro-borde-acento: rgba(255, 255, 255, .18); /* Los bordes que acompañan al color de acento */ --oscuro-acento: var(--color-secundario); /* El color de acento: enlaces activos, íconos, botón principal */ --oscuro-acento-claro: var(--color-secundario); /* El acento en su versión clara, para el hover */ --oscuro-acento-oscuro: var(--color-secundario); /* El acento en su versión oscura */ --oscuro-texto: #f2f0ea; /* El texto */ --oscuro-texto-suave: #9a9a9a; /* El texto secundario, el que acompaña */ --oscuro-texto-inverso: var(--oscuro-fondo); /* Texto del color del fondo: las letras de un botón de acento */ --oscuro-fondo-inverso: var(--oscuro-texto); /* Una superficie clara sobre el fondo oscuro */ /* Puntos donde las dos familias no coinciden. Cada uno arranca en el papel mayoritario. */ --oscuro-x-accordion-wrapper-card-header-button-color: var(--oscuro-texto); /* .accordion-wrapper .card-header button · body:texto eman:texto hidl:texto-inverso pile:acento */ --oscuro-x-btn-secondary-borde: var(--oscuro-acento); /* .btn-secondary:hover · body:acento eman:acento hidl:— pile:fondo-inverso */ --oscuro-x-carritomenu-btn-secondary-borde: var(--oscuro-fondo); /* #carritoMenu .btn-secondary · body:— eman:— hidl:fondo pile:fondo-inverso */ --oscuro-x-carritomenu-btn-secondary-fondo: var(--oscuro-fondo); /* #carritoMenu .btn-secondary · body:— eman:— hidl:fondo pile:fondo-inverso */ --oscuro-x-divbarrasuperior-follow-link-color: var(--oscuro-texto); /* #divBarraSuperior .follow-link · body:— eman:— hidl:texto-inverso pile:texto */ --oscuro-x-divbarrasuperior-p-seguinos-color: var(--oscuro-texto); /* #divBarraSuperior .p-seguinos · body:— eman:— hidl:texto-inverso pile:texto */ --oscuro-x-divbloquepuntosdeventa-accordion-wrapper-color: var(--oscuro-acento); /* #divBloquePuntosdeVenta .accordion-wrapper .card-header butt · body:— eman:— hidl:acento pile:texto-inverso */ --oscuro-x-fp-badge-envio-color: var(--oscuro-fondo); /* .fp-badge-envio · body:fondo eman:texto hidl:— pile:— */ --oscuro-x-fp-badge-envio-color-b: var(--oscuro-fondo); /* .fp-badge-envio::before · body:fondo eman:texto hidl:— pile:— */ background-color: var(--oscuro-fondo); color: var(--oscuro-texto); } /* ---------- El fondo del sitio ---------- */ :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-nota-img, :where(html.sitio-oscuro.familia-oro) footer .accordion-wrapper .card.plain.accordion-item { background: var(--oscuro-fondo); } :where(html.sitio-oscuro) #mobileMenu .mobile-menu-panel { background: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-marca) #carritoMenu, :where(html.sitio-oscuro.familia-marca) #divTextos .card, :where(html.sitio-oscuro.familia-marca) #favoritosMenu, :where(html.sitio-oscuro.familia-marca) #filtrosMenu, :where(html.sitio-oscuro.familia-marca) #mobileMenu, :where(html.sitio-oscuro.familia-marca) .navbar.navbar-bg-color-secundario, :where(html.sitio-oscuro.familia-marca) body { background: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-oro) #carritoMenu, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer, :where(html.sitio-oscuro.familia-oro) #carritoMenu.bg-white, :where(html.sitio-oscuro.familia-oro) #divBanners.bg-color-secundario, :where(html.sitio-oscuro.familia-oro) #divBanners.wrapper, :where(html.sitio-oscuro.familia-oro) #divBarraSuperior, :where(html.sitio-oscuro.familia-oro) #divBloqueMarcas, :where(html.sitio-oscuro.familia-oro) #divBloqueMarcas .container, :where(html.sitio-oscuro.familia-oro) #favoritosMenu, :where(html.sitio-oscuro.familia-oro) #filtrosMenu, :where(html.sitio-oscuro.familia-oro) .bg-soft-primary, :where(html.sitio-oscuro.familia-oro) .icon-list.bullet-soft-primary.bullet-bg i, :where(html.sitio-oscuro.familia-oro) .navbar-bg-color-secundario, :where(html.sitio-oscuro.familia-oro) .navbar-bg-color-secundario .navbar-collapse, :where(html.sitio-oscuro.familia-oro) .navbar-bg-color-secundario .offcanvas-body, :where(html.sitio-oscuro.familia-oro) .navbar-bg-color-secundario .offcanvas-header, :where(html.sitio-oscuro.familia-oro) .navbar-bg-color-secundario.navbar-stick, :where(html.sitio-oscuro.familia-oro) .pie-pagina, :where(html.sitio-oscuro.familia-oro) .wrapper, :where(html.sitio-oscuro.familia-oro) body, :where(html.sitio-oscuro.familia-oro) footer, :where(html.sitio-oscuro.familia-oro) section { background-color: var(--oscuro-fondo); } :where(html.sitio-oscuro) #divBanners, :where(html.sitio-oscuro) .bg-gray, :where(html.sitio-oscuro) .bg-light, :where(html.sitio-oscuro) .bg-white { background-color: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-marca) #offcanvas-search, :where(html.sitio-oscuro.familia-marca) .modal-content, :where(html.sitio-oscuro.familia-marca) .page-item.disabled .page-link, :where(html.sitio-oscuro.familia-marca) .page-link { background-color: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-marca) #carritoMenu .btn-secondary { background-color: var(--oscuro-x-carritomenu-btn-secondary-fondo); } :where(html.sitio-oscuro.familia-oro) .swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro.familia-oro) .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-marca) #carritoMenu .btn-secondary { border-color: var(--oscuro-x-carritomenu-btn-secondary-borde); } :where(html.sitio-oscuro.familia-oro) #carritoMenu #divCuponCarritoMenu .btn-primary, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secondary:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secundario:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-seguir-comprando:hover, :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) #swiperPortadasHorizontal .btn-primary, :where(html.sitio-oscuro.familia-oro) #swiperPortadasVertical .btn-primary, :where(html.sitio-oscuro.familia-oro) .badge.bg-primary, :where(html.sitio-oscuro.familia-oro) .badge.bg-secondary, :where(html.sitio-oscuro.familia-oro) .btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) .btn-primary, :where(html.sitio-oscuro.familia-oro) .btn-primary:active, :where(html.sitio-oscuro.familia-oro) .btn-primary:focus, :where(html.sitio-oscuro.familia-oro) .btn-primary:hover, :where(html.sitio-oscuro.familia-oro) .btn-secondary:hover, :where(html.sitio-oscuro.familia-oro) .btn-secundario:hover, :where(html.sitio-oscuro.familia-oro) .btn-whatsapp-contacto:hover, :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active .count, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary.active, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary.active i, :where(html.sitio-oscuro.familia-oro) .divider .text-gray, :where(html.sitio-oscuro.familia-oro) .divider .text-light, :where(html.sitio-oscuro.familia-oro) .divider .text-white, :where(html.sitio-oscuro.familia-oro) .divider path, :where(html.sitio-oscuro.familia-oro) .fp-despacho-dia, :where(html.sitio-oscuro.familia-oro) .page-item.active .page-link, :where(html.sitio-oscuro.familia-oro) .page-link.active, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante] > input:checked ~ span, :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]) > input:checked ~ span, :where(html.sitio-oscuro.familia-oro) .tag-list .btn-soft-ash:hover, :where(html.sitio-oscuro.familia-oro) .tag-list .btn:hover, :where(html.sitio-oscuro.familia-oro) [id^="txtDescuento_"], :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary.active, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary.active i, :where(html.sitio-oscuro.familia-oro) p.btn.btn-primary[onclick^="validarControles"] { color: var(--oscuro-fondo); } /* El chip de envío tiene fondo propio (verde o el acento del sitio): con las dos clases le gana a .fp-badge-info, que más abajo pinta el ícono y el texto de los otros chips con el acento, y que lo dejaba invisible sobre su fondo */ :where(html.sitio-oscuro.familia-oro) .fp-badge-info.fp-badge-envio::before { color: var(--oscuro-fondo); } :where(html.sitio-oscuro.familia-oro) .fp-badge-info.fp-badge-envio { color: var(--oscuro-x-fp-badge-envio-color); } /* ---------- Las superficies que se despegan del fondo (tarjetas, paneles, menús) ---------- */ /* El .widget de la columna del catálogo no va acá: la superficie es su .categorias-nav, que ya tiene este fondo y las esquinas redondeadas. Pintado también el widget, sus esquinas rectas asomaban detrás de las redondeadas en Categorías, Marcas, Colecciones y Filtros. */ :where(html.sitio-oscuro.familia-oro) .categorias-nav, :where(html.sitio-oscuro.familia-oro) .fp-acc, :where(html.sitio-oscuro.familia-oro) .fp-acc-body, :where(html.sitio-oscuro.familia-oro) .fp-acc-head, :where(html.sitio-oscuro.familia-oro) .fp-barra, :where(html.sitio-oscuro.familia-oro) .fp-cd-box, :where(html.sitio-oscuro.familia-oro) .fp-combo, :where(html.sitio-oscuro.familia-oro) .fp-countdown, :where(html.sitio-oscuro.familia-oro) .fp-cupon, :where(html.sitio-oscuro.familia-oro) .fp-despacho-countdown, :where(html.sitio-oscuro.familia-oro) .fp-garantia, :where(html.sitio-oscuro.familia-oro) .fp-gift, :where(html.sitio-oscuro.familia-oro) .fp-linkrow, :where(html.sitio-oscuro.familia-oro) .fp-modal-talles .modal-header, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-acordes, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-grupo, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-imita, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-piramide, :where(html.sitio-oscuro.familia-oro) .fp-pickup, :where(html.sitio-oscuro.familia-oro) .fp-plan, :where(html.sitio-oscuro.familia-oro) .fp-progreso-flotante, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-container { background: var(--oscuro-panel); } :where(html.sitio-oscuro.familia-oro) #carritoMenu .sugerido-carrito-item, :where(html.sitio-oscuro.familia-oro) #divBloqueNewsletter .card, :where(html.sitio-oscuro.familia-oro) #divBloqueTestimonios .card, :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .calificacion-item, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .card, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .fp-resena-card, :where(html.sitio-oscuro.familia-oro) #selectOrdenCalificaciones, :where(html.sitio-oscuro.familia-oro) #selectOrdenCalificaciones option, :where(html.sitio-oscuro.familia-oro) .accordion-button, :where(html.sitio-oscuro.familia-oro) .accordion-item, :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .accordion-item, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom, :where(html.sitio-oscuro.familia-oro) .alert.alert-danger, :where(html.sitio-oscuro.familia-oro) .alert.alert-info, :where(html.sitio-oscuro.familia-oro) .alert.alert-primary, :where(html.sitio-oscuro.familia-oro) .alert.alert-secondary, :where(html.sitio-oscuro.familia-oro) .alert.alert-success, :where(html.sitio-oscuro.familia-oro) .alert.alert-warning, :where(html.sitio-oscuro.familia-oro) .card, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary, :where(html.sitio-oscuro.familia-oro) .form-control, :where(html.sitio-oscuro.familia-oro) .form-control:focus, :where(html.sitio-oscuro.familia-oro) .form-select, :where(html.sitio-oscuro.familia-oro) .form-select:focus, :where(html.sitio-oscuro.familia-oro) .fp-resena-card, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn, :where(html.sitio-oscuro.familia-oro) .fp-resenas-orden, :where(html.sitio-oscuro.familia-oro) .input-group-text, :where(html.sitio-oscuro.familia-oro) .modal-content, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu, :where(html.sitio-oscuro.familia-oro) .offcanvas, :where(html.sitio-oscuro.familia-oro) .page-item.disabled .page-link, :where(html.sitio-oscuro.familia-oro) .page-link, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante], :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary, :where(html.sitio-oscuro.familia-oro) select option, :where(html.sitio-oscuro.familia-oro) select.form-control option, :where(html.sitio-oscuro.familia-oro) select.form-select option { background-color: var(--oscuro-panel); } /* ---------- Un segundo nivel de superficie, para lo que va encima de un panel ---------- */ :where(html.sitio-oscuro.familia-oro) .fp-badge-info, :where(html.sitio-oscuro.familia-oro) .fp-garantia-ico, :where(html.sitio-oscuro.familia-oro) .fp-linkrow-ico, :where(html.sitio-oscuro.familia-oro) .fp-linkrow:hover, :where(html.sitio-oscuro.familia-oro) .fp-pickup-ico, :where(html.sitio-oscuro.familia-oro) .fp-pickup:hover, :where(html.sitio-oscuro.familia-oro) .fp-plan:hover { background: var(--oscuro-panel-2); } :where(html.sitio-oscuro.familia-oro) .accordion-button:not(.collapsed), :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body .count, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body:hover, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn.activo, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn:hover, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu .dropdown-item:focus, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu .dropdown-item:hover, :where(html.sitio-oscuro.familia-oro) .page-link:hover, :where(html.sitio-oscuro.familia-oro) .tag-list .btn, :where(html.sitio-oscuro.familia-oro) .tag-list .btn-soft-ash { background-color: var(--oscuro-panel-2); } /* ---------- Los bordes y separadores ---------- */ :where(html.sitio-oscuro.familia-oro) .fp-modal-talles .modal-header { border-bottom-color: var(--oscuro-borde); } :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu td, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto .fp-stickybar-thumb, :where(html.sitio-oscuro.familia-oro) #divProductosResumenCheckout, :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) #resumenCalculos, :where(html.sitio-oscuro.familia-oro) #resumenProductos, :where(html.sitio-oscuro.familia-oro) #resumenProductos > div, :where(html.sitio-oscuro.familia-oro) #selectOrdenCalificaciones, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom, :where(html.sitio-oscuro.familia-oro) .alert.alert-primary, :where(html.sitio-oscuro.familia-oro) .alert.alert-secondary, :where(html.sitio-oscuro.familia-oro) .aside-categorias .widget, :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]) > span, :where(html.sitio-oscuro.familia-oro) .categorias-nav, :where(html.sitio-oscuro.familia-oro) .categorias-nav .widget-title, :where(html.sitio-oscuro.familia-oro) .categorias-nav-item, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary, :where(html.sitio-oscuro.familia-oro) .footer-hr, :where(html.sitio-oscuro.familia-oro) .fp-acc, :where(html.sitio-oscuro.familia-oro) .fp-barra, :where(html.sitio-oscuro.familia-oro) .fp-cd-box, :where(html.sitio-oscuro.familia-oro) .fp-combo, :where(html.sitio-oscuro.familia-oro) .fp-countdown, :where(html.sitio-oscuro.familia-oro) .fp-cupon, :where(html.sitio-oscuro.familia-oro) .fp-despacho-countdown, :where(html.sitio-oscuro.familia-oro) .fp-garantia, :where(html.sitio-oscuro.familia-oro) .fp-gift, :where(html.sitio-oscuro.familia-oro) .fp-linkrow, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-acordes, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-grupo, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-imita, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-piramide, :where(html.sitio-oscuro.familia-oro) .fp-pickup, :where(html.sitio-oscuro.familia-oro) .fp-plan, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn, :where(html.sitio-oscuro.familia-oro) .fp-resenas-orden, :where(html.sitio-oscuro.familia-oro) .modal-footer, :where(html.sitio-oscuro.familia-oro) .modal-header, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-container, :where(html.sitio-oscuro.familia-oro) .offcanvas-header, :where(html.sitio-oscuro.familia-oro) .page-link, :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) .table > :not(caption) > * > *, :where(html.sitio-oscuro.familia-oro) .table-order, :where(html.sitio-oscuro.familia-oro) .table-order tbody, :where(html.sitio-oscuro.familia-oro) .table-order td, :where(html.sitio-oscuro.familia-oro) .table-order th, :where(html.sitio-oscuro.familia-oro) .table-order thead, :where(html.sitio-oscuro.familia-oro) .table-order tr, :where(html.sitio-oscuro.familia-oro) hr, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary { border-color: var(--oscuro-borde); } :where(html.sitio-oscuro.familia-oro) .categorias-nav .categorias-subnav { border-top-color: var(--oscuro-borde); } /* ---------- Los bordes que acompañan al color de acento ---------- */ :where(html.sitio-oscuro.familia-oro) .fp-despacho, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-nota-img, :where(html.sitio-oscuro.familia-oro) .fp-progreso-flotante { border-color: var(--oscuro-borde-acento); } /* ---------- El color de acento: enlaces activos, íconos, botón principal ---------- */ :where(html.sitio-oscuro.familia-oro) #swiperPortadasHorizontal .btn-primary, :where(html.sitio-oscuro.familia-oro) #swiperPortadasVertical .btn-primary, :where(html.sitio-oscuro.familia-oro) .btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) .btn-primary, :where(html.sitio-oscuro.familia-oro) .btn-secondary:hover, :where(html.sitio-oscuro.familia-oro) .btn-secundario:hover, :where(html.sitio-oscuro.familia-oro) .btn-whatsapp-contacto:hover, :where(html.sitio-oscuro.familia-oro) .fp-despacho-dia, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-fill { background: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-marca) .swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-button, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-button.swiper-button-disabled, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-button:hover, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-slide figure .item-link, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-slide figure .item-link.swiper-button-disabled, :where(html.sitio-oscuro.familia-marca) .swiper-container.nav-color .swiper-slide figure .item-link:hover, :where(html.sitio-oscuro.familia-marca) .swiper-controls .swiper-pagination .swiper-pagination-bullet { background: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secondary:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secundario:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-seguir-comprando:hover, :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .badge.bg-primary, :where(html.sitio-oscuro.familia-oro) .badge.bg-secondary, :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active .count, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary.active, :where(html.sitio-oscuro.familia-oro) .page-link.active, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante] > input:checked ~ span, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante]:has(input:checked), :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .tag-list .btn-soft-ash:hover, :where(html.sitio-oscuro.familia-oro) .tag-list .btn:hover, :where(html.sitio-oscuro.familia-oro) [id^="txtDescuento_"], :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary.active { background-color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-marca) .badge-cart, :where(html.sitio-oscuro.familia-marca) .badge-login, :where(html.sitio-oscuro.familia-marca) .btn-primary, :where(html.sitio-oscuro.familia-marca) .checkout-quantity-badge, :where(html.sitio-oscuro.familia-marca) .form-check-input:checked, :where(html.sitio-oscuro.familia-marca) .page-link:hover { background-color: var(--oscuro-acento); } :where(html.sitio-oscuro) .page-item.active .page-link { background-color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover, :where(html.sitio-oscuro.familia-oro) #swiperPortadasHorizontal .btn-primary, :where(html.sitio-oscuro.familia-oro) #swiperPortadasVertical .btn-primary, :where(html.sitio-oscuro.familia-oro) .btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) .btn-secundario:hover, :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary.active, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) .form-control:focus, :where(html.sitio-oscuro.familia-oro) .form-select:focus, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn.activo, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn:hover, :where(html.sitio-oscuro.familia-oro) .page-item.active .page-link, :where(html.sitio-oscuro.familia-oro) .page-link.active, :where(html.sitio-oscuro.familia-oro) .page-link:hover, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante]:has(input:checked), :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante]:hover, :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]):has(input:checked), :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]):hover, :where(html.sitio-oscuro.familia-oro) .tag-list .btn-soft-ash:hover, :where(html.sitio-oscuro.familia-oro) .tag-list .btn:hover, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary.active, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary:hover { border-color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-marca) #Checkout .checkout-check .form-check-label.btn.active, :where(html.sitio-oscuro.familia-marca) #Checkout .checkout-check .form-check-label.btn:hover, :where(html.sitio-oscuro.familia-marca) .btn-primary, :where(html.sitio-oscuro.familia-marca) .form-check-input:checked, :where(html.sitio-oscuro.familia-marca) .swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro.familia-marca) .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro.familia-marca) .text-inverse a:not(.btn):hover { border-color: var(--oscuro-acento); } :where(html.sitio-oscuro) .btn-secondary:hover { border-color: var(--oscuro-x-btn-secondary-borde); } :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active { border-left-color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-oro) #carritoMenu .amount, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secondary, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-secundario, :where(html.sitio-oscuro.familia-oro) #carritoMenu .btn-seguir-comprando, :where(html.sitio-oscuro.familia-oro) #carritoMenu .div-carrito-vacio i, :where(html.sitio-oscuro.familia-oro) #carritoMenu .link-dark.cursor-pointer:hover i, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer .h5.text-dark, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer .h6.text-dark, :where(html.sitio-oscuro.familia-oro) #carritoMenu .shopping-cart .link-titulo-carrito:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .shopping-cart-item i:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu .price, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu tr:last-child strong, :where(html.sitio-oscuro.familia-oro) #carritoMenu [onclick*="eliminarProductoCarrito"]:hover, :where(html.sitio-oscuro.familia-oro) #carritoMenu [onclick*="eliminarProductoCarrito"]:hover i, :where(html.sitio-oscuro.familia-oro) #carritoMenu ins, :where(html.sitio-oscuro.familia-oro) #divBanners i, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto .amount, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto ins, :where(html.sitio-oscuro.familia-oro) #divBloqueBanners i, :where(html.sitio-oscuro.familia-oro) #divBloqueBeneficios i, :where(html.sitio-oscuro.familia-oro) #divBloqueTestimonios .text-warning, :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover, :where(html.sitio-oscuro.familia-oro) #favoritosMenu .div-favorito-vacio i, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .text-warning, :where(html.sitio-oscuro.familia-oro) .accordion-button:not(.collapsed), :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .card-header button:not(.collapsed), :where(html.sitio-oscuro.familia-oro) .alert.alert-custom .alert-link, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom i, :where(html.sitio-oscuro.familia-oro) .alert.alert-danger a, :where(html.sitio-oscuro.familia-oro) .alert.alert-info a, :where(html.sitio-oscuro.familia-oro) .alert.alert-success a, :where(html.sitio-oscuro.familia-oro) .alert.alert-warning a, :where(html.sitio-oscuro.familia-oro) .alert.alert-warning i, :where(html.sitio-oscuro.familia-oro) .amount, :where(html.sitio-oscuro.familia-oro) .badge-oro, :where(html.sitio-oscuro.familia-oro) .breadcrumb-item + .breadcrumb-item::before, :where(html.sitio-oscuro.familia-oro) .btn-close:hover, :where(html.sitio-oscuro.familia-oro) .btn-outline-primary, :where(html.sitio-oscuro.familia-oro) .btn-secondary, :where(html.sitio-oscuro.familia-oro) .btn-secundario, :where(html.sitio-oscuro.familia-oro) .btn-whatsapp-contacto, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body:hover, :where(html.sitio-oscuro.familia-oro) .categorias-nav .widget-title, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary i, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) .enlace-whatsapp-contacto:hover, :where(html.sitio-oscuro.familia-oro) .fp-badge-info::before, :where(html.sitio-oscuro.familia-oro) .fp-cd-box, :where(html.sitio-oscuro.familia-oro) .fp-cd-num, :where(html.sitio-oscuro.familia-oro) .fp-despacho-countdown, :where(html.sitio-oscuro.familia-oro) .fp-garantia-ico i, :where(html.sitio-oscuro.familia-oro) .fp-linkrow-chev i, :where(html.sitio-oscuro.familia-oro) .fp-linkrow-ico i, :where(html.sitio-oscuro.familia-oro) .fp-modal .modal-title i, :where(html.sitio-oscuro.familia-oro) .fp-pickup-ico i, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn.activo, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn:hover, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-lbl i, :where(html.sitio-oscuro.familia-oro) .fp-resenas-resumen .text-warning, :where(html.sitio-oscuro.familia-oro) .megamenu-panel .megamenu-col-titulo, :where(html.sitio-oscuro.familia-oro) .megamenu-panel .megamenu-item:focus, :where(html.sitio-oscuro.familia-oro) .megamenu-panel .megamenu-item:hover, :where(html.sitio-oscuro.familia-oro) .megamenu-panel .megamenu-item:hover .megamenu-item-titulo, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-benefit i, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-benefit-icon, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-redirect i, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-redirect-icon, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu .dropdown-item:focus, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu .dropdown-item:hover, :where(html.sitio-oscuro.familia-oro) .navbar .nav-link.active, :where(html.sitio-oscuro.familia-oro) .navbar .nav-link:hover, :where(html.sitio-oscuro.familia-oro) .navbar .navbar-other .nav-link i:hover, :where(html.sitio-oscuro.familia-oro) .number-picker-checkout .btn-decrement, :where(html.sitio-oscuro.familia-oro) .number-picker-checkout .btn-increment, :where(html.sitio-oscuro.familia-oro) .page-link:hover, :where(html.sitio-oscuro.familia-oro) .pie-pagina a:hover, :where(html.sitio-oscuro.familia-oro) .post-category, :where(html.sitio-oscuro.familia-oro) .price, :where(html.sitio-oscuro.familia-oro) .project.item .post-header h2 a:hover, :where(html.sitio-oscuro.familia-oro) .swiper-slide.project .post-header h2 a:hover, :where(html.sitio-oscuro.familia-oro) .text-line, :where(html.sitio-oscuro.familia-oro) .widget .link-body:hover, :where(html.sitio-oscuro.familia-oro) .widget .unordered-list a:hover, :where(html.sitio-oscuro.familia-oro) .widget .unordered-list li::marker, :where(html.sitio-oscuro.familia-oro) .widget .unordered-list.bullet-primary li::before, :where(html.sitio-oscuro.familia-oro) a:hover, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary i, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary:hover, :where(html.sitio-oscuro.familia-oro) p[onclick^="eliminarProductoCheckout"]:hover, :where(html.sitio-oscuro.familia-oro) p[onclick^="eliminarProductoCheckout"]:hover i { color: var(--oscuro-acento); } :where(html.sitio-oscuro) .follow-link:hover, :where(html.sitio-oscuro) .price ins { color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-marca) #Checkout .btn-decrement, :where(html.sitio-oscuro.familia-marca) #Checkout .btn-increment, :where(html.sitio-oscuro.familia-marca) #Checkout .checkout-check .form-check-label.btn.active, :where(html.sitio-oscuro.familia-marca) #Checkout .shopping-cart i:hover, :where(html.sitio-oscuro.familia-marca) #btnEditarDatosPersonales:hover, :where(html.sitio-oscuro.familia-marca) #btnEditarEnvio:hover, :where(html.sitio-oscuro.familia-marca) #carritoMenu i:not(.btn i), :where(html.sitio-oscuro.familia-marca) #contenidoPago .card-body a, :where(html.sitio-oscuro.familia-marca) #contenidoPago i:not(.form-check-label i), :where(html.sitio-oscuro.familia-marca) #divTextos .accordion-wrapper .card-header button, :where(html.sitio-oscuro.familia-marca) #divTextos .accordion-wrapper .card-header button.collapsed, :where(html.sitio-oscuro.familia-marca) #divTextos .accordion-wrapper .card-header button:before, :where(html.sitio-oscuro.familia-marca) #divTextos .accordion-wrapper .card-header button:hover, :where(html.sitio-oscuro.familia-marca) #favoritosMenu i, :where(html.sitio-oscuro.familia-marca) #filtrosMenu .accordion-wrapper .card-header button:hover, :where(html.sitio-oscuro.familia-marca) #mobileMenu .mobile-menu-header, :where(html.sitio-oscuro.familia-marca) #mobileMenu .mobile-menu-header .mobile-menu-back, :where(html.sitio-oscuro.familia-marca) #mobileMenu .mobile-menu-header .mobile-menu-title, :where(html.sitio-oscuro.familia-marca) .a-registrate, :where(html.sitio-oscuro.familia-marca) .alert-custom .alert-link, :where(html.sitio-oscuro.familia-marca) .alert-icon i, :where(html.sitio-oscuro.familia-marca) .aside-categorias .accordion-wrapper .card-header button:after, :where(html.sitio-oscuro.familia-marca) .banner-icon, :where(html.sitio-oscuro.familia-marca) .bg-dark.text-inverse a:not(.btn):not([class*=link-]):hover, :where(html.sitio-oscuro.familia-marca) .bg-navy.text-inverse a:not(.btn):not([class*=link-]):hover, :where(html.sitio-oscuro.familia-marca) .breadcrumb-item a:hover, :where(html.sitio-oscuro.familia-marca) .breadcrumb-item+.breadcrumb-item::before, :where(html.sitio-oscuro.familia-marca) .btn-decrement, :where(html.sitio-oscuro.familia-marca) .btn-increment, :where(html.sitio-oscuro.familia-marca) .footer-coredevs, :where(html.sitio-oscuro.familia-marca) .footer-titulo, :where(html.sitio-oscuro.familia-marca) .link-body.active, :where(html.sitio-oscuro.familia-marca) .link-body:hover, :where(html.sitio-oscuro.familia-marca) .link-dark:hover, :where(html.sitio-oscuro.familia-marca) .link-light:focus, :where(html.sitio-oscuro.familia-marca) .link-light:hover, :where(html.sitio-oscuro.familia-marca) .navbar-dark .navbar-nav .nav-link.active, :where(html.sitio-oscuro.familia-marca) .navbar-dark .navbar-nav .nav-link:focus, :where(html.sitio-oscuro.familia-marca) .navbar-dark .navbar-nav .nav-link:hover, :where(html.sitio-oscuro.familia-marca) .navbar-dark .navbar-nav .show>.nav-link, :where(html.sitio-oscuro.familia-marca) .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:hover, :where(html.sitio-oscuro.familia-marca) .page-link, :where(html.sitio-oscuro.familia-marca) .text-inverse a:not(.btn):hover, :where(html.sitio-oscuro.familia-marca) .text-reset a:hover, :where(html.sitio-oscuro.familia-marca) .ver-mas, :where(html.sitio-oscuro.familia-marca) [class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]):hover, :where(html.sitio-oscuro.familia-marca) a.text-reset:hover, :where(html.sitio-oscuro.familia-marca) footer .accordion-wrapper .card-header button:before, :where(html.sitio-oscuro.familia-marca) footer .accordion-wrapper .card-header button:hover { color: var(--oscuro-acento); } :where(html.sitio-oscuro.familia-marca) #divBloquePuntosdeVenta .accordion-wrapper .card-header button { color: var(--oscuro-x-divbloquepuntosdeventa-accordion-wrapper-color); } /* ---------- El acento en su versión clara, para el hover ---------- */ :where(html.sitio-oscuro.familia-oro) .btn-primary:active, :where(html.sitio-oscuro.familia-oro) .btn-primary:focus, :where(html.sitio-oscuro.familia-oro) .btn-primary:hover { background: var(--oscuro-acento-claro); } :where(html.sitio-oscuro.familia-oro) .btn-primary:active, :where(html.sitio-oscuro.familia-oro) .btn-primary:focus, :where(html.sitio-oscuro.familia-oro) .btn-primary:hover { border-color: var(--oscuro-acento-claro); } :where(html.sitio-oscuro.familia-oro) .megamenu-panel a.megamenu-col-titulo[href]:focus, :where(html.sitio-oscuro.familia-oro) .megamenu-panel a.megamenu-col-titulo[href]:hover { color: var(--oscuro-acento-claro); } /* ---------- El texto ---------- */ :where(html.sitio-oscuro.familia-oro) #carritoMenu .fp-shipbar-labels b, :where(html.sitio-oscuro.familia-oro) #carritoMenu .fp-shipbar-txt, :where(html.sitio-oscuro.familia-oro) #carritoMenu .link-light, :where(html.sitio-oscuro.familia-oro) #carritoMenu .number-picker .input-group input, :where(html.sitio-oscuro.familia-oro) #carritoMenu .number-picker-cart .input-group input, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-body > .d-flex p, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer .h6, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer .text-dark, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer label, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer span, :where(html.sitio-oscuro.familia-oro) #carritoMenu .offcanvas-footer strong, :where(html.sitio-oscuro.familia-oro) #carritoMenu .shopping-cart .link-titulo-carrito, :where(html.sitio-oscuro.familia-oro) #carritoMenu .shopping-cart-item i.uil-trash-alt, :where(html.sitio-oscuro.familia-oro) #carritoMenu .sugerido-carrito-item, :where(html.sitio-oscuro.familia-oro) #carritoMenu .sugerido-carrito-item *, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu p, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu span, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu strong, :where(html.sitio-oscuro.familia-oro) #carritoMenu .totales-carrito-menu td, :where(html.sitio-oscuro.familia-oro) #carritoMenu [onclick*="eliminarProductoCarrito"], :where(html.sitio-oscuro.familia-oro) #carritoMenu [onclick*="eliminarProductoCarrito"] i, :where(html.sitio-oscuro.familia-oro) #carritoMenu i, :where(html.sitio-oscuro.familia-oro) #carritoMenu input[type="number"], :where(html.sitio-oscuro.familia-oro) #divBanners h4, :where(html.sitio-oscuro.familia-oro) #divBanners p, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto label, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto span, :where(html.sitio-oscuro.familia-oro) #divBloqueCategorias h4, :where(html.sitio-oscuro.familia-oro) #divBloqueCategorias h4 a, :where(html.sitio-oscuro.familia-oro) #divBloqueNewsletter .card .text-white, :where(html.sitio-oscuro.familia-oro) #divBloqueNewsletter .card :is(h1, h2, h3, h4), :where(html.sitio-oscuro.familia-oro) #divCuentaRegresivaPromocion .fp-countdown-title, :where(html.sitio-oscuro.familia-oro) #divCuentaRegresivaPromocion span:not(.fp-cd-num):not(.fp-cd-lbl), :where(html.sitio-oscuro.familia-oro) #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) #favoritosMenu i, :where(html.sitio-oscuro.familia-oro) #filtrosMenu, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .calificacion-item, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .card, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .fp-resena-card, :where(html.sitio-oscuro.familia-oro) #selectOrdenCalificaciones, :where(html.sitio-oscuro.familia-oro) #selectOrdenCalificaciones option, :where(html.sitio-oscuro.familia-oro) #swiperPortadasHorizontal h1, :where(html.sitio-oscuro.familia-oro) #swiperPortadasHorizontal h2, :where(html.sitio-oscuro.familia-oro) #swiperPortadasVertical h1, :where(html.sitio-oscuro.familia-oro) #swiperPortadasVertical h2, :where(html.sitio-oscuro.familia-oro) .accordion-button, :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .card-body, :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .card-body li, :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .card-body p, :where(html.sitio-oscuro.familia-oro) .accordion-wrapper .card-body strong, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom p, :where(html.sitio-oscuro.familia-oro) .alert.alert-custom span, :where(html.sitio-oscuro.familia-oro) .alert.alert-danger, :where(html.sitio-oscuro.familia-oro) .alert.alert-info, :where(html.sitio-oscuro.familia-oro) .alert.alert-primary, :where(html.sitio-oscuro.familia-oro) .alert.alert-secondary, :where(html.sitio-oscuro.familia-oro) .alert.alert-success, :where(html.sitio-oscuro.familia-oro) .alert.alert-warning, :where(html.sitio-oscuro.familia-oro) .btn-close, :where(html.sitio-oscuro.familia-oro) .btn-close::before, :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) .buscador-resultados .picker.picker-botones label:not([for*=radColor]) > span, :where(html.sitio-oscuro.familia-oro) .card, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body, :where(html.sitio-oscuro.familia-oro) .checkout-check .form-check-label.btn-outline-primary, :where(html.sitio-oscuro.familia-oro) .display-1, :where(html.sitio-oscuro.familia-oro) .display-2, :where(html.sitio-oscuro.familia-oro) .display-3, :where(html.sitio-oscuro.familia-oro) .display-4, :where(html.sitio-oscuro.familia-oro) .display-5, :where(html.sitio-oscuro.familia-oro) .display-6, :where(html.sitio-oscuro.familia-oro) .div-buscar-header .link-dark, :where(html.sitio-oscuro.familia-oro) .enlace-whatsapp-contacto, :where(html.sitio-oscuro.familia-oro) .form-check-label, :where(html.sitio-oscuro.familia-oro) .form-control, :where(html.sitio-oscuro.familia-oro) .form-control:focus, :where(html.sitio-oscuro.familia-oro) .form-label, :where(html.sitio-oscuro.familia-oro) .form-select, :where(html.sitio-oscuro.familia-oro) .form-select:focus, :where(html.sitio-oscuro.familia-oro) .fp-acc, :where(html.sitio-oscuro.familia-oro) .fp-acc-body, :where(html.sitio-oscuro.familia-oro) .fp-acc-body li, :where(html.sitio-oscuro.familia-oro) .fp-acc-body p, :where(html.sitio-oscuro.familia-oro) .fp-acc-body strong, :where(html.sitio-oscuro.familia-oro) .fp-acc-head, :where(html.sitio-oscuro.familia-oro) .fp-badge-info, :where(html.sitio-oscuro.familia-oro) .fp-barra, :where(html.sitio-oscuro.familia-oro) .fp-combo, :where(html.sitio-oscuro.familia-oro) .fp-countdown, :where(html.sitio-oscuro.familia-oro) .fp-cupon, :where(html.sitio-oscuro.familia-oro) .fp-despacho-txt, :where(html.sitio-oscuro.familia-oro) .fp-despacho-txt span, :where(html.sitio-oscuro.familia-oro) .fp-garantia, :where(html.sitio-oscuro.familia-oro) .fp-garantia-titulo, :where(html.sitio-oscuro.familia-oro) .fp-gift, :where(html.sitio-oscuro.familia-oro) .fp-linkrow, :where(html.sitio-oscuro.familia-oro) .fp-linkrow-title, :where(html.sitio-oscuro.familia-oro) .fp-modal .modal-title, :where(html.sitio-oscuro.familia-oro) .fp-perfumeria-titulo, :where(html.sitio-oscuro.familia-oro) .fp-pickup, :where(html.sitio-oscuro.familia-oro) .fp-pickup-title, :where(html.sitio-oscuro.familia-oro) .fp-plan, :where(html.sitio-oscuro.familia-oro) .fp-plan-title, :where(html.sitio-oscuro.familia-oro) .fp-progreso-flotante .fp-shipbar-txt, :where(html.sitio-oscuro.familia-oro) .fp-progreso-flotante-cerrar, :where(html.sitio-oscuro.familia-oro) .fp-resena-card, :where(html.sitio-oscuro.familia-oro) .fp-resena-card .fp-resena-autor, :where(html.sitio-oscuro.familia-oro) .fp-resena-card .fp-resena-texto, :where(html.sitio-oscuro.familia-oro) .fp-resena-card h6, :where(html.sitio-oscuro.familia-oro) .fp-resena-card p, :where(html.sitio-oscuro.familia-oro) .fp-resena-card span, :where(html.sitio-oscuro.familia-oro) .fp-resena-card strong, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-btn, :where(html.sitio-oscuro.familia-oro) .fp-resenas-dist-lbl, :where(html.sitio-oscuro.familia-oro) .fp-resenas-orden, :where(html.sitio-oscuro.familia-oro) .input-group-text, :where(html.sitio-oscuro.familia-oro) .modal-content, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-benefit strong, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-benefit-title, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-benefits-title, :where(html.sitio-oscuro.familia-oro) .mp-checkout-pro-redirect-title, :where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu .dropdown-item, :where(html.sitio-oscuro.familia-oro) .navbar .nav-link, :where(html.sitio-oscuro.familia-oro) .navbar .navbar-other .list-inline-item a, :where(html.sitio-oscuro.familia-oro) .navbar .navbar-other .nav-link i, :where(html.sitio-oscuro.familia-oro) .number-picker-cart .input-group input, :where(html.sitio-oscuro.familia-oro) .number-picker-checkout .input-group .form-control, :where(html.sitio-oscuro.familia-oro) .page-link, :where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante] > span, :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]), :where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]) > span, :where(html.sitio-oscuro.familia-oro) .pie-pagina .widget-title, :where(html.sitio-oscuro.familia-oro) .pie-pagina h4, :where(html.sitio-oscuro.familia-oro) .pie-pagina h5, :where(html.sitio-oscuro.familia-oro) .project.item .post-header h2 a, :where(html.sitio-oscuro.familia-oro) .project.item .post-header h3 a, :where(html.sitio-oscuro.familia-oro) .swiper-slide.project .post-header h2 a, :where(html.sitio-oscuro.familia-oro) .table, :where(html.sitio-oscuro.familia-oro) .text-dark, :where(html.sitio-oscuro.familia-oro) .titulo-whatsapp-contacto, :where(html.sitio-oscuro.familia-oro) .widget .image-list .post-content a, :where(html.sitio-oscuro.familia-oro) .widget .link-body, :where(html.sitio-oscuro.familia-oro) .widget .unordered-list a, :where(html.sitio-oscuro.familia-oro) footer .accordion-wrapper .card-header button, :where(html.sitio-oscuro.familia-oro) label[for^="metodoPago_"].btn-outline-primary, :where(html.sitio-oscuro.familia-oro) p[onclick^="eliminarProductoCheckout"], :where(html.sitio-oscuro.familia-oro) p[onclick^="eliminarProductoCheckout"] i, :where(html.sitio-oscuro.familia-oro) select option, :where(html.sitio-oscuro.familia-oro) select.form-control option, :where(html.sitio-oscuro.familia-oro) select.form-select option { color: var(--oscuro-texto); } :where(html.sitio-oscuro) #carritoMenu .form-control, :where(html.sitio-oscuro) #carritoMenu .text-white, :where(html.sitio-oscuro) #carritoMenu p, :where(html.sitio-oscuro) .link-dark, :where(html.sitio-oscuro) .offcanvas, :where(html.sitio-oscuro) body { color: var(--oscuro-texto); } :where(html.sitio-oscuro.familia-marca) #filtrosMenu .accordion-wrapper .card-header button.collapsed, :where(html.sitio-oscuro.familia-marca) #txtBuscarShop, :where(html.sitio-oscuro.familia-marca) #txtBuscarShop::placeholder, :where(html.sitio-oscuro.familia-marca) .div-filtros-shop .text-muted, :where(html.sitio-oscuro.familia-marca) .link-body, :where(html.sitio-oscuro.familia-marca) .link-light, :where(html.sitio-oscuro.familia-marca) .number-picker .input-group input, :where(html.sitio-oscuro.familia-marca) .post-title, :where(html.sitio-oscuro.familia-marca) .variante-light { color: var(--oscuro-texto); } :where(html.sitio-oscuro) .accordion-wrapper .card-header button { color: var(--oscuro-x-accordion-wrapper-card-header-button-color); } :where(html.sitio-oscuro.familia-marca) #divBarraSuperior .follow-link { color: var(--oscuro-x-divbarrasuperior-follow-link-color); } :where(html.sitio-oscuro.familia-marca) #divBarraSuperior .p-seguinos { color: var(--oscuro-x-divbarrasuperior-p-seguinos-color); } /* ---------- El texto secundario, el que acompaña ---------- */ :where(html.sitio-oscuro.familia-oro) #carritoMenu .div-carrito-vacio p, :where(html.sitio-oscuro.familia-oro) #carritoMenu .link-dark.cursor-pointer i, :where(html.sitio-oscuro.familia-oro) #carritoMenu .shopping-cart-item i, :where(html.sitio-oscuro.familia-oro) #carritoMenu .variante-light, :where(html.sitio-oscuro.familia-oro) #carritoMenu del span, :where(html.sitio-oscuro.familia-oro) #divBloqueNewsletter .card p, :where(html.sitio-oscuro.familia-oro) #favoritosMenu .div-favorito-vacio p, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones .text-muted, :where(html.sitio-oscuro.familia-oro) #listadoCalificaciones small, :where(html.sitio-oscuro.familia-oro) .accordion-body, :where(html.sitio-oscuro.familia-oro) .card .text-muted, :where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body .count, :where(html.sitio-oscuro.familia-oro) .form-control::placeholder, :where(html.sitio-oscuro.familia-oro) .fp-cd-lbl, :where(html.sitio-oscuro.familia-oro) .fp-garantia-texto, :where(html.sitio-oscuro.familia-oro) .fp-linkrow-sub, :where(html.sitio-oscuro.familia-oro) .fp-pickup-item, :where(html.sitio-oscuro.familia-oro) .fp-pickup-sub, :where(html.sitio-oscuro.familia-oro) .fp-plan-sub, :where(html.sitio-oscuro.familia-oro) .fp-resena-card .fp-resena-fecha, :where(html.sitio-oscuro.familia-oro) .fp-resena-card .text-muted, :where(html.sitio-oscuro.familia-oro) .fp-resena-card small, :where(html.sitio-oscuro.familia-oro) .pie-pagina, :where(html.sitio-oscuro.familia-oro) .pie-pagina a, :where(html.sitio-oscuro.familia-oro) .price del, :where(html.sitio-oscuro.familia-oro) .price del span, :where(html.sitio-oscuro.familia-oro) .tag-list .btn, :where(html.sitio-oscuro.familia-oro) .tag-list .btn-soft-ash, :where(html.sitio-oscuro.familia-oro) .text-muted, :where(html.sitio-oscuro.familia-oro) del.amount { color: var(--oscuro-texto-suave); } /* ---------- Texto del color del fondo: las letras de un botón de acento ---------- */ :where(html.sitio-oscuro.familia-marca) #Confirmacion .card-body, :where(html.sitio-oscuro.familia-marca) #btnEditarDatosPersonales, :where(html.sitio-oscuro.familia-marca) #btnEditarEnvio, :where(html.sitio-oscuro.familia-marca) #carritoMenu .btn-secondary, :where(html.sitio-oscuro.familia-marca) #carritoMenu .btn-secondary i, :where(html.sitio-oscuro.familia-marca) #contenidoPago .card-body, :where(html.sitio-oscuro.familia-marca) #divBloquePuntosdeVenta, :where(html.sitio-oscuro.familia-marca) #divResumenPedido .card-header h3, :where(html.sitio-oscuro.familia-marca) #divResumenPedido .card-header i, :where(html.sitio-oscuro.familia-marca) #divResumenPedido .link-dark, :where(html.sitio-oscuro.familia-marca) #divResumenPedido .number-picker .input-group input, :where(html.sitio-oscuro.familia-marca) #resumenProductos, :where(html.sitio-oscuro.familia-marca) .badge-cart, :where(html.sitio-oscuro.familia-marca) .badge-login, :where(html.sitio-oscuro.familia-marca) .btn-primary, :where(html.sitio-oscuro.familia-marca) .btn-primary i, :where(html.sitio-oscuro.familia-marca) .btn-primary:hover, :where(html.sitio-oscuro.familia-marca) .btn-secondary, :where(html.sitio-oscuro.familia-marca) .btn-secondary:hover, :where(html.sitio-oscuro.familia-marca) .divider.text-white, :where(html.sitio-oscuro.familia-marca) .form-control, :where(html.sitio-oscuro.familia-marca) .image-wrapper, :where(html.sitio-oscuro.familia-marca) .page-item.active .page-link { color: var(--oscuro-texto-inverso); } :where(html.sitio-oscuro.familia-oro) #divRecientes h2 a:hover, :where(html.sitio-oscuro.familia-oro) #divRecomendados h2 a:hover { color: var(--oscuro-texto-inverso); } /* ---------- Una superficie clara sobre el fondo oscuro ---------- */ :where(html.sitio-oscuro.familia-oro) #carritoMenu .sugerido-carrito-item figure, :where(html.sitio-oscuro.familia-oro) #divBarraCompraProducto .fp-stickybar-thumb, :where(html.sitio-oscuro.familia-oro) .project figure, :where(html.sitio-oscuro.familia-oro) .swiper-slide.project figure { background-color: var(--oscuro-fondo-inverso); } /* ---------- Controles de los carruseles ---------- El theme pinta los puntos de paginación con rgba(52, 63, 82, .25), un gris azulado al 25% pensado para fondo claro, que sobre negro no se ve. Y el punto activo se perdía distinto en cada sitio: emantoni y bodyadvance lo dejaban transparente para dibujar un aro con el borde, pero el theme les da "border: 0" y el aro nunca llegaba a dibujarse; piledtas lo pintaba del mismo color que el fondo de atrás; hidleds, de blanco sobre una sección blanca. Acá se les da un trato parejo y que funciona sobre cualquier fondo: el activo en el color de acento del sitio, los demás apagados pero visibles. ---------- */ :where(html.sitio-oscuro) .swiper-controls .swiper-pagination .swiper-pagination-bullet, :where(html.sitio-oscuro) .swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet, :where(html.sitio-oscuro) .swiper-container.dots-light .swiper-pagination .swiper-pagination-bullet, :where(html.sitio-oscuro) .swiper-container.dots-dark .swiper-pagination .swiper-pagination-bullet { background: var(--oscuro-texto-suave); } :where(html.sitio-oscuro) .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro) .swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro) .swiper-container.dots-light .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro) .swiper-container.dots-dark .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, :where(html.sitio-oscuro) #divPortadas .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--oscuro-acento); border-color: var(--oscuro-acento); } /* ---------- Lo único de toda la hoja que lleva !important (dos reglas) ---------- El theme pinta el hover de estos enlaces con `color: var(--color-primario) !important`, pensado para un sitio claro. Sobre fondo oscuro eso hace desaparecer el texto cuando el color de marca es oscuro: en hidleds el título del producto se ponía negro sobre la tarjeta negra, y en piledtas petróleo sobre petróleo, tanto en los bloques de productos como en los resultados del buscador. Una declaración sin `!important` no le puede ganar a otra que sí lo trae, así que acá —y sólo acá— se usa. Es exactamente lo que hacían a mano hidleds y piledtas antes de unificar (`.link-dark:hover { color: var(--color-secundario) !important }`): en la familia de marca el acento ES el secundario, y en la dorada el acento ya es el primario, así que bodyadvance y emantoni siguen mostrando el mismo dorado de siempre (Rodri, 10/09/2026). ---------- */ :where(html.sitio-oscuro) .link-dark:hover, :where(html.sitio-oscuro) .text-reset a:hover, :where(html.sitio-oscuro) a.text-reset:hover { color: var(--oscuro-acento) !important; } /* La ruta de navegación y el contenido que sigue tienen el mismo fondo en un sitio oscuro, así que el pt-12 (o el que traiga) del contenedor de abajo se suma al aire de la propia ruta y el contenido arranca muy abajo. En un sitio claro la ruta es una franja gris y ese aire la separa del contenido: queda como está. Las utilidades pt-* del theme llevan !important, por eso esta también (Rodri, 18/10/2026). */ :where(html.sitio-oscuro) section.wrapper:has(> .container > nav[aria-label="breadcrumb"]):not(.d-non) + section.wrapper > .container { padding-top: 0 !important; } /* ---------- La página actual de la paginación ---------- El theme la pinta con `background: var(--color-primario)`, que en un sitio claro se recorta contra el blanco. Pero en un sitio oscuro el color de marca suele SER el del fondo: en hidleds el primario es negro y el fondo es negro, y en piledtas los dos son el mismo petróleo, así que el círculo de la página actual desaparecía y quedaba el número flotando, sin nada que lo marque. Se usa el acento, que es justamente el color elegido para verse sobre este fondo (Rodri, 13/09/2026). ---------- */ :where(html.sitio-oscuro) .pagination .page-item.active .page-link { background: var(--oscuro-acento); color: var(--oscuro-texto-inverso); box-shadow: none; } /* ---------- Los campos que no se pueden editar ---------- El theme pinta los campos de solo lectura y los deshabilitados con fondo gris claro (#f6f7f9), con más peso que las reglas de esta hoja. En la familia dorada la letra de los campos es clara, así que quedaba texto claro sobre fondo claro: el email del cliente con la sesión iniciada, en el checkout, casi no se leía (emantoni, 14/10/2026). Acá se les da el segundo nivel de superficie y la letra de siempre. La familia de marca no lo necesita: sus campos ya son claros con letra oscura. ---------- */ :where(html.sitio-oscuro.familia-oro) .form-control:disabled, :where(html.sitio-oscuro.familia-oro) .form-control[readonly] { background-color: var(--oscuro-panel-2); color: var(--oscuro-texto); } /* ---------- El oscurecido detrás de un panel o una ventana ---------- El theme oscurece con un velo pensado para un sitio claro (negro al 50% detrás de las ventanas, gris azulado al 70% detrás de los paneles). Sobre un fondo que ya es negro ese velo casi no cambia nada, y lo único que se ve apagarse a medias es lo claro, como la barra de anuncios dorada de arriba: en el celular parecía quedar por encima del panel de filtros y de la ventana de compartir, aunque estaba debajo (emantoni, 14/10/2026). En un sitio oscuro el velo es más cerrado, así todo lo de atrás queda tapado por igual. ---------- */ :where(html.sitio-oscuro) .modal-backdrop, :where(html.sitio-oscuro) .offcanvas-backdrop { background-color: rgba(0, 0, 0, .8); } /* ---------- El video flotante de la ficha ---------- La cruz para esconder la burbuja es blanca con la letra en --fp-ink, que en un sitio oscuro es clara: quedaba blanco sobre blanco y no se veía. Acá va sobre una superficie oscura, la burbuja lleva el acento alrededor para despegarse del fondo negro, y el velo de la ventana del video es más cerrado, como el de las otras ventanas (emantoni, 14/10/2026). ---------- */ :where(html.sitio-oscuro) .fp-videoflotante { border: 2px solid var(--oscuro-acento); } :where(html.sitio-oscuro) .fp-videoflotante-cerrar { background: var(--oscuro-panel-2); color: var(--oscuro-texto); border: 1px solid var(--oscuro-borde-acento); } :where(html.sitio-oscuro) .fp-videoflotante-modal { background: rgba(0, 0, 0, .88); }