/* ===================================================================== SETCOM TOOLKIT — Skins de diseño Se aplican sobre Divi vía la clase del : .scom-skin-a → Claro Azul (corporativo suave, vigente) .scom-skin-min → Minimalista (limpio, monocromo, mucho aire) .scom-skin-corp → Corporativo (azul/navy, sólido, profesional) Reglas comunes con selector [class*="scom-skin-"] → escalan a nuevos skins. No se tocan layouts ni imágenes: solo color, tipografía, botones y tarjetas. ===================================================================== */ /* ---------- Variables por skin ---------- */ .scom-skin-a { --scom-accent: #1e7fd6; --scom-accent-2: #2ea3f2; --scom-accent-grad: linear-gradient(135deg, #2ea3f2 0%, #1565c0 100%); --scom-heading: #0b2f55; --scom-text: #33475b; --scom-page-bg: #f3f7fc; --scom-card-bg: #ffffff; --scom-card-shadow: 0 10px 30px rgba(20, 70, 130, .10); --scom-card-radius: 14px; --scom-btn-radius: 10px; --scom-link: #1e7fd6; } .scom-skin-min { --scom-accent: #111827; --scom-accent-2: #2563eb; --scom-accent-grad: none; --scom-heading: #111827; --scom-text: #4b5563; --scom-page-bg: #ffffff; --scom-card-bg: #ffffff; --scom-card-shadow: none; --scom-card-radius: 6px; --scom-btn-radius: 4px; --scom-link: #111827; } .scom-skin-corp { --scom-accent: #1565c0; --scom-accent-2: #2ea3f2; --scom-accent-grad: linear-gradient(135deg, #2ea3f2 0%, #0d47a1 100%); --scom-heading: #0a2540; --scom-text: #36506b; --scom-page-bg: #eef3f8; --scom-card-bg: #ffffff; --scom-card-shadow: 0 8px 26px rgba(10, 37, 64, .12); --scom-card-radius: 10px; --scom-btn-radius: 6px; --scom-link: #1565c0; } .scom-skin-electro { --scom-accent: #e62e2d; --scom-accent-2: #ffb400; --scom-accent-grad: none; --scom-heading: #1c1c1c; --scom-text: #5b5b5b; --scom-page-bg: #f4f4f4; --scom-card-bg: #ffffff; --scom-card-shadow: 0 4px 16px rgba(0, 0, 0, .06); --scom-card-radius: 6px; --scom-btn-radius: 3px; --scom-link: #e62e2d; } /* ===================================================================== REGLAS COMUNES (cualquier skin) — usan las variables ===================================================================== */ [class*="scom-skin-"] #page-container { background-color: var(--scom-page-bg); } [class*="scom-skin-"] h1, [class*="scom-skin-"] h2, [class*="scom-skin-"] h3, [class*="scom-skin-"] h4 { color: var(--scom-heading); letter-spacing: -.01em; } [class*="scom-skin-"] a:not(.et_pb_button):not(.wp-block-button__link):not(.scom-sw-btn):not(.scom-sw-save):not(.scom-sw-close) { color: var(--scom-link); } /* ---------- Botones Divi + WooCommerce ---------- */ [class*="scom-skin-"] .et_pb_button, [class*="scom-skin-"] .woocommerce a.button, [class*="scom-skin-"] .woocommerce button.button, [class*="scom-skin-"] .woocommerce .button { background-image: var(--scom-accent-grad) !important; background-color: var(--scom-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--scom-btn-radius) !important; padding: .62em 1.6em !important; font-weight: 600 !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease !important; } [class*="scom-skin-"] .et_pb_button:hover, [class*="scom-skin-"] .woocommerce .button:hover { transform: translateY(-2px); filter: brightness(1.06); padding: .62em 1.6em !important; } [class*="scom-skin-"] .et_pb_button:after { color: #fff !important; } /* ---------- Tarjetas / blurbs ---------- */ [class*="scom-skin-"] .et_pb_blurb { background: var(--scom-card-bg); border-radius: var(--scom-card-radius); box-shadow: var(--scom-card-shadow); padding: 26px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } [class*="scom-skin-"] .et_pb_blurb:hover { transform: translateY(-4px); } /* ---------- Productos WooCommerce ---------- */ [class*="scom-skin-"] .woocommerce ul.products li.product .price, [class*="scom-skin-"] .price .amount { color: var(--scom-accent) !important; font-weight: 700; } [class*="scom-skin-"] .woocommerce ul.products li.product { border-radius: var(--scom-card-radius); background: var(--scom-card-bg); box-shadow: var(--scom-card-shadow); padding: 14px; transition: transform .2s ease; } [class*="scom-skin-"] .woocommerce ul.products li.product:hover { transform: translateY(-5px); } /* Títulos de producto en tono de encabezado (no el azul Divi) */ [class*="scom-skin-"] .woocommerce ul.products li.product h2, [class*="scom-skin-"] .woocommerce ul.products li.product h3, [class*="scom-skin-"] .woocommerce ul.products li.product .woocommerce-loop-product__title, [class*="scom-skin-"] li.product a.woocommerce-LoopProduct-link, [class*="scom-skin-"] li.product h2 a, [class*="scom-skin-"] li.product h3 a { color: var(--scom-heading) !important; } [class*="scom-skin-"] #top-menu li a:hover, [class*="scom-skin-"] .et-menu li a:hover { color: var(--scom-accent) !important; } /* ===================================================================== SKIN A — Claro Azul: realce de header ===================================================================== */ .scom-skin-a #main-header, .scom-skin-a .et-l--header { box-shadow: 0 2px 14px rgba(20,70,130,.08); } /* ===================================================================== SKIN MINIMALISTA — botones "ghost", tarjetas planas con borde fino ===================================================================== */ .scom-skin-min .et_pb_button, .scom-skin-min .woocommerce .button { background: transparent !important; background-image: none !important; color: var(--scom-accent) !important; border: 1px solid var(--scom-accent) !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: .04em; font-size: .85em !important; } .scom-skin-min .et_pb_button:hover, .scom-skin-min .woocommerce .button:hover { background: var(--scom-accent) !important; color: #fff !important; transform: none; } .scom-skin-min .et_pb_button:after { color: inherit !important; } .scom-skin-min .et_pb_blurb, .scom-skin-min .woocommerce ul.products li.product { border: 1px solid #ececec; box-shadow: none; } .scom-skin-min .et_pb_blurb:hover, .scom-skin-min .woocommerce ul.products li.product:hover { border-color: #d6d6d6; transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .scom-skin-min h1, .scom-skin-min h2, .scom-skin-min h3 { font-weight: 600; } .scom-skin-min #main-header, .scom-skin-min .et-l--header { box-shadow: 0 1px 0 #ececec; } /* ===================================================================== SKIN CORPORATIVO — barra de acento superior en tarjetas, títulos firmes ===================================================================== */ .scom-skin-corp .et_pb_blurb { border-top: 3px solid var(--scom-accent); } .scom-skin-corp h1, .scom-skin-corp h2 { font-weight: 700; } .scom-skin-corp #main-header, .scom-skin-corp .et-l--header { box-shadow: 0 3px 16px rgba(10,37,64,.10); } .scom-skin-corp .woocommerce ul.products li.product { border-top: 3px solid var(--scom-accent); } /* ===================================================================== SKIN ELECTRO — inspirado en ElectroDeals (e-commerce, rojo + amarillo) ===================================================================== */ .scom-skin-electro .et_pb_button, .scom-skin-electro .woocommerce a.button, .scom-skin-electro .woocommerce button.button, .scom-skin-electro .woocommerce .button, .scom-skin-electro .woocommerce ul.products li.product .button { background: var(--scom-accent) !important; background-image: none !important; color: #fff !important; border: 0 !important; text-transform: uppercase; letter-spacing: .03em; font-weight: 700 !important; border-radius: var(--scom-btn-radius) !important; } .scom-skin-electro .et_pb_button:hover, .scom-skin-electro .woocommerce .button:hover { background: #c41f1e !important; filter: none; transform: translateY(-1px); } .scom-skin-electro .et_pb_button:after { color: #fff !important; } /* Tarjetas de producto estilo Electro */ .scom-skin-electro .woocommerce ul.products li.product { border: 1px solid #ececec; box-shadow: none; border-radius: 6px; padding: 16px; } .scom-skin-electro .woocommerce ul.products li.product:hover { border-color: #e2e2e2; box-shadow: 0 10px 26px rgba(0, 0, 0, .10); transform: translateY(-4px); } .scom-skin-electro .woocommerce ul.products li.product .price, .scom-skin-electro .price .amount { color: var(--scom-accent) !important; font-weight: 700; } /* Badge "¡Oferta!" amarillo circular (estilo Electro) */ .scom-skin-electro .woocommerce span.onsale { background: var(--scom-accent-2) !important; color: #1c1c1c !important; border-radius: 50% !important; min-height: 44px; min-width: 44px; line-height: 44px; padding: 0; font-weight: 700; box-shadow: none; border: 0; } /* Cabecera: acento rojo */ .scom-skin-electro #main-header, .scom-skin-electro .et-l--header { border-bottom: 3px solid var(--scom-accent); } .scom-skin-electro #top-menu li a:hover, .scom-skin-electro .et-menu li a:hover { color: var(--scom-accent) !important; } /* Tarjetas/blurbs e iconos en rojo */ .scom-skin-electro .et_pb_blurb { border: 1px solid #ececec; box-shadow: var(--scom-card-shadow); } .scom-skin-electro .et_pb_blurb h4 { color: var(--scom-heading); } /* Portadas de catálogo con borde rojo sutil al pasar */ .scom-skin-electro .scom-cat-cover:hover img { box-shadow: 0 14px 32px rgba(230, 46, 45, .22); } /* ===================================================================== BARRA SUPERIOR DE ANUNCIOS (estilo ElectroDeals) ===================================================================== */ .scom-topbar { background: #2b2b2b; color: #eaeaea; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .scom-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 7px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .scom-topbar .scom-topbar-right { opacity: .85; } @media (max-width: 640px) { .scom-topbar-inner { justify-content: center; font-size: 12px; } } /* Flash / contador de ofertas */ .scom-flash-head { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; } .scom-flash-label { font-size: 1.4em; font-weight: 800; color: #1c1c1c; } .scom-countdown { display: flex; gap: 6px; align-items: center; font-size: 1.05em; color: #555; } .scom-countdown b { background: #e62e2d; color: #fff; padding: 5px 9px; border-radius: 6px; font-weight: 800; min-width: 30px; display: inline-block; text-align: center; } .scom-cat-ico { display: inline-block; width: 1.4em; } /* Acabado e-commerce: subrayado rojo bajo títulos de sección (solo home) */ .home .et_pb_text h2 { position: relative; display: inline-block; padding-bottom: 12px; margin-bottom: 6px; } .home .et_pb_text h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; background: #e62e2d; border-radius: 2px; } /* Bloque de ofertas con marco suave */ .scom-flash { background: #fff6f6; border: 1px solid #ffdada; border-radius: 12px; padding: 16px 20px; display: inline-block; margin-bottom: 6px; } .scom-flash-sec { background: #fafafa !important; } /* Tarjetas de categoría: acabado tipo botón-card */ [class*="scom-skin-"] .scom-cat-card .et_pb_blurb { border: 1px solid #ececec; box-shadow: none; padding: 18px 12px; } [class*="scom-skin-"] .scom-cat-card .et_pb_blurb:hover { border-color: #e62e2d; box-shadow: 0 8px 20px rgba(230,46,45,.12); } .scom-cat-card .et_pb_blurb h4 { font-size: 1.05em; } .scom-cat-card .et_pb_blurb_description { color: #e62e2d; font-weight: 600; font-size: .9em; } /* Hero: que respire mejor */ .scom-cat-side { box-shadow: 0 6px 22px rgba(0,0,0,.06); } .scom-hero-promo p:last-of-type { color: #666; } /* ===================================================================== HOME ESTILO ELECTRODEALS — hero, sidebar de categorías, barra roja ===================================================================== */ .scom-hero { background: #f1f1f1; } .scom-cat-side { background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 14px 18px; } .scom-cat-side h4 { margin: 0 0 8px; font-weight: 700; } .scom-cat-side ul { list-style: none; margin: 0; padding: 0; } .scom-cat-side li { border-bottom: 1px solid #f2f2f2; } .scom-cat-side li:last-child { border-bottom: 0; } .scom-cat-side li a { display: block; padding: 9px 4px; color: #333 !important; transition: padding .15s ease, color .15s ease; } .scom-cat-side li a:hover { color: #e62e2d !important; padding-left: 8px; } .scom-hero-kicker { color: #e62e2d; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85em; margin: 0 0 6px; } .scom-hero-promo h1 { font-size: 2.6em; line-height: 1.08; margin: 0 0 10px; } /* Tira de logos de marcas */ .scom-brands img { height: 40px; width: auto; margin: 12px 20px; display: inline-block; vertical-align: middle; filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; } .scom-brands img:hover { filter: none; opacity: 1; } @media (max-width: 600px) { .scom-brands img { height: 30px; margin: 8px 12px; } } /* Barra de garantías en rojo (estilo Electro) */ .scom-skin-electro .scom-electro-trust { background: #e62e2d !important; } .scom-skin-electro .scom-electro-trust .et_pb_blurb, .scom-skin-electro .scom-electro-trust .et_pb_blurb h4, .scom-skin-electro .scom-electro-trust .et_pb_blurb .et_pb_blurb_description, .scom-skin-electro .scom-electro-trust p { color: #fff !important; } .scom-skin-electro .scom-electro-trust .et_pb_blurb { background: transparent; border: 0; box-shadow: none; } /* Tarjetas de categoría (Compra por categoría) */ .scom-cat-card .et_pb_blurb, [class*="scom-skin-"] .scom-cat-card .et_pb_blurb { text-align: center; } /* ===================================================================== PORTADAS DE CATÁLOGOS (home) — válido en cualquier diseño ===================================================================== */ .scom-cat-cover img { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .scom-cat-cover:hover img { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, .16); } .scom-catalogos-home h4 { margin-top: 12px; font-weight: 600; }