/* Estilos personalizados de ZYKAX GROUP. El diseño/maquetación lo define el cliente. */ /* prueba de auto-deploy 2026-08-19 15:11 */ /* ============================================================= * DESACTIVADO A PETICIÓN DEL CLIENTE (2026-08-25): todo lo de abajo * queda envuelto en "@media not all" (nunca aplica, sin borrar nada) * para revisar qué se puede lograr solo con los ajustes nativos de * Astra/WooCommerce antes de volver a depender de CSS a medida. * Para reactivar: quitar la línea "@media not all {" de abajo y su * "}" de cierre al final del archivo. * ============================================================= */ @media not all { /* ============================================================= * SITIO COMPLETO — estilo alineado con /merch-zx1/ * * Tokens (colores, tipografía) copiados 1:1 de merch-zx1/css/styles.css. * Se aplican a TODO el sitio WordPress (home, blog, tienda, checkout, * páginas legales, mi cuenta) para que combine con esa landing. La landing * en sí (/merch-zx1/) es un archivo estático fuera de WordPress y no la * toca este CSS. * * El fondo del sitio (body/.site) ya se configura NATIVAMENTE desde * Apariencia > Personalizar > Colores > Fondo del sitio / Fondo del * contenido (guardado en la opción astra-settings). Aquí solo se cubre * , que Astra no expone en el Personalizador y por eso se veía * blanco en el rebote elástico del scroll (rubber-band en iOS/macOS). * ============================================================= */ html { background: #05060a; } body { --zx-cyan: #23C4E8; --zx-cyan-2: #21E6E6; --zx-gold: #E6A92E; --zx-ink: #05060a; --zx-ink-2: #0a0c12; --zx-line: rgba(233, 241, 245, .12); --zx-txt: #e9f1f5; --zx-mut: rgba(233, 241, 245, .62); --zx-mut2: rgba(233, 241, 245, .40); --zx-font: 'Roboto', system-ui, sans-serif; background: var(--zx-ink); color: var(--zx-txt); font-family: var(--zx-font); } #content, .site-content, .ast-container, .site { background: var(--zx-ink); } h1, h2, h3, .page-title, .entry-title { font-family: var(--zx-font); font-weight: 700; letter-spacing: -.02em; color: var(--zx-txt); } a { color: var(--zx-cyan); } a:hover { color: var(--zx-cyan-2); } /* Cabecera (nav) — misma paleta oscura de merch-zx1 */ .site-header, .main-header-bar, .ast-above-header, .ast-below-header { background: var(--zx-ink) !important; border-color: var(--zx-line) !important; } .site-header .site-title a, .site-header .site-description, .main-header-menu a, .ast-header-break-point .main-header-bar .main-header-bar-navigation .page_item > a, .main-header-bar .main-navigation ul li > a { color: var(--zx-txt) !important; } .main-header-menu a:hover, .main-header-bar .main-navigation ul li > a:hover { color: var(--zx-cyan) !important; } /* Etiquetas tipo "eyebrow" (categorías, breadcrumbs) */ body.woocommerce-page .woocommerce-breadcrumb { font-family: var(--zx-font); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--zx-cyan); opacity: .85; } body.woocommerce-page .woocommerce-breadcrumb a { color: var(--zx-mut); } /* Grid de productos (tienda / categoría) */ body.woocommerce-page ul.products li.product { background: var(--zx-ink-2); border: 1px solid var(--zx-line); border-radius: 14px; padding: 16px; transition: border-color .3s, transform .3s; } body.woocommerce-page ul.products li.product:hover { border-color: rgba(35, 196, 232, .4); transform: translateY(-3px); } body.woocommerce-page ul.products li.product img { border-radius: 10px; } body.woocommerce-page ul.products li.product .woocommerce-loop-product__title, body.woocommerce-page ul.products li.product h2 { color: var(--zx-txt); font-weight: 600; } body.woocommerce-page .price, body.woocommerce-page .price .amount { color: var(--zx-cyan); font-weight: 700; } body.woocommerce-page del .amount { color: var(--zx-mut); opacity: .6; } /* Botones — píldora con gradiente cian, igual a .btn--buy de merch-zx1 */ body.woocommerce-page .button, body.woocommerce-page button.button, body.woocommerce-page input.button, body.woocommerce-page a.button, body.woocommerce-page .single_add_to_cart_button, body.woocommerce-page #place_order, body.woocommerce-page .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--zx-font); font-weight: 600; font-size: 14px; letter-spacing: .02em; padding: 13px 26px; border-radius: 999px; cursor: pointer; border: none; background: linear-gradient(100deg, var(--zx-cyan), var(--zx-cyan-2)); color: #021318; box-shadow: 0 0 0 1px rgba(35, 196, 232, .4), 0 10px 40px -8px rgba(35, 196, 232, .6); transition: transform .2s, box-shadow .3s; } body.woocommerce-page .button:hover, body.woocommerce-page button.button:hover, body.woocommerce-page input.button:hover, body.woocommerce-page a.button:hover, body.woocommerce-page .single_add_to_cart_button:hover, body.woocommerce-page #place_order:hover, body.woocommerce-page .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(35, 196, 232, .6), 0 16px 50px -8px rgba(35, 196, 232, .8); color: #021318; } /* Botones secundarios (ej. "seguir comprando", cupón) quedan tipo ghost */ body.woocommerce-page .wc-backward, body.woocommerce-page .woocommerce-form-coupon .button { background: transparent; color: var(--zx-txt); border: 1px solid rgba(233, 241, 245, .28); box-shadow: none; } body.woocommerce-page .wc-backward:hover, body.woocommerce-page .woocommerce-form-coupon .button:hover { border-color: var(--zx-cyan); color: var(--zx-cyan); box-shadow: none; } /* Formularios: cantidad, cupón, checkout */ body.woocommerce-page input[type="text"], body.woocommerce-page input[type="email"], body.woocommerce-page input[type="tel"], body.woocommerce-page input[type="number"], body.woocommerce-page input[type="password"], body.woocommerce-page textarea, body.woocommerce-page select, body.woocommerce-page .select2-container .select2-selection { background: var(--zx-ink-2); border: 1px solid var(--zx-line); border-radius: 8px; color: var(--zx-txt); font-family: var(--zx-font); } body.woocommerce-page input[type="text"]:focus, body.woocommerce-page input[type="email"]:focus, body.woocommerce-page input[type="tel"]:focus, body.woocommerce-page input[type="number"]:focus, body.woocommerce-page input[type="password"]:focus, body.woocommerce-page textarea:focus, body.woocommerce-page select:focus { outline: none; border-color: var(--zx-cyan); box-shadow: 0 0 0 3px rgba(35, 196, 232, .18); } body.woocommerce-page label { color: var(--zx-mut); } /* Ficha de producto individual */ body.woocommerce-page div.product .summary .price { font-size: 28px; } body.woocommerce-page div.product .woocommerce-product-details__short-description { color: var(--zx-mut); } /* Tablas: carrito y resumen de pedido en checkout */ body.woocommerce-page table.shop_table { background: var(--zx-ink-2); border: 1px solid var(--zx-line); border-radius: 12px; color: var(--zx-txt); } body.woocommerce-page table.shop_table th, body.woocommerce-page table.shop_table td { border-color: var(--zx-line); } body.woocommerce-page table.shop_table th { color: var(--zx-mut); font-family: var(--zx-font); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; } /* Mensajes (info, error, éxito) con acento cian en vez del verde/azul de Woo */ body.woocommerce-page .woocommerce-message, body.woocommerce-page .woocommerce-info { background: rgba(35, 196, 232, .08); border-top-color: var(--zx-cyan); color: var(--zx-txt); } body.woocommerce-page .woocommerce-error { background: rgba(255, 123, 123, .08); border-top-color: #ff7b7b; color: var(--zx-txt); } /* Widget de pago Wompi: fondo del bloque debe quedar oscuro, no blanco */ body.woocommerce-page ul.wc_payment_methods { border-color: var(--zx-line); } body.woocommerce-page ul.wc_payment_methods li { border-top-color: var(--zx-line); } body.woocommerce-page .payment_box { background: var(--zx-ink-2) !important; color: var(--zx-mut); border-radius: 8px; } /* ============================================================= * PÁGINAS LEGALES (Términos y Condiciones, Política de Privacidad) * Mismo look que merch-zx1/terminos.html y merch-zx1/privacidad.html * (clase .doc de ese sitio). Se activa solo en las páginas marcadas * con el body class 'zx-doc' (ver functions.php). * ============================================================= */ body.zx-doc #content, body.zx-doc .site-content, body.zx-doc .ast-container, body.zx-doc article, body.zx-doc .entry-content { background: var(--zx-ink); color: var(--zx-txt); } body.zx-doc .doc { max-width: 840px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 40px) 40px; } body.zx-doc .entry-title, body.zx-doc .page-title, body.zx-doc .doc h1 { font-family: var(--zx-font); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; font-size: clamp(28px, 4.6vw, 44px); color: var(--zx-txt); margin-bottom: 26px; } body.zx-doc .doc h2 { font-family: var(--zx-font); font-size: clamp(16px, 2.2vw, 20px); color: var(--zx-cyan); margin: 30px 0 10px; letter-spacing: .02em; font-weight: 700; } body.zx-doc .doc p { font-size: 14.5px; line-height: 1.75; color: var(--zx-txt); margin: 0 0 12px; } body.zx-doc .doc a { color: var(--zx-cyan); } body.zx-doc .doc__back { display: inline-block; margin-bottom: 22px; font-family: var(--zx-font); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--zx-cyan); text-decoration: none; } body.zx-doc .doc__back:hover { text-decoration: underline; } /* ============================================================= * FOOTER — Constructor de Footer nativo de Astra (Below Footer, columna * única): widget de imagen (logo) + copyright + menú "Footer Legal". * Editable desde Apariencia > Personalizar > Constructor de Footer / * Apariencia > Widgets / Apariencia > Menús, sin tocar código. Aquí solo * se recolorea con la paleta de merch-zx1 (Astra no expone esto en su UI). * ============================================================= */ /* El fondo del Below Footer ya se configura NATIVAMENTE desde Personalizar > Constructor de Footer > Below Footer > Background (guardado en astra-settings[hbb-footer-bg-obj-responsive]). Antes estaba en #colophon (el