/* Theme Name: Tienda Digital Pro Theme URI: https://tiendadigitalproweb.com Author: Orly Master Author URI: https://orlymaster.com.ar Description: Tema para venta de productos digitales (ebooks, infoproductos, web apps) con soporte WooCommerce y pasarela Mercado Pago. La portada es 100% editable con bloques nativos de WordPress (patrones insertables: hero, cómo funciona, catálogo, confianza), con sistema de color completo, cuadrícula de catálogo configurable, tipografía y checkout personalizables — reutilizable para cualquier marca. Incluye contenido de ejemplo. Version: 1.5.1 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: tienda-digital-pro Tags: e-commerce, woocommerce, dark, one-column */ /* ========================================================= DESIGN TOKENS Los colores de acento (--tdp-green / --tdp-gold) y la tipografía se sobrescriben en tiempo real desde el Personalizador (ver tdp_dynamic_css en functions.php) — así el mismo tema sirve para cualquier marca. El modo claro/oscuro se controla con el atributo data-theme en . ========================================================= */ :root{ --tdp-radius: 18px; --tdp-grid-cols-desktop: 3; --tdp-grid-cols-tablet: 2; --tdp-grid-cols-mobile: 1; --tdp-grid-gap: 28px; --tdp-card-padding: 20px; --tdp-font-display: 'Space Grotesk', 'Archivo Black', sans-serif; --tdp-font-body: 'Inter', system-ui, sans-serif; --tdp-font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* Modo oscuro (por defecto) — estos son solo valores de respaldo; los reales se generan en tiempo real desde el Personalizador (ver tdp_dynamic_css en functions.php) */ html[data-theme="dark"], html:not([data-theme]){ --tdp-void: #0a0c0a; /* fondo del body */ --tdp-header-bg: #0a0c0a; /* fondo de la cabecera */ --tdp-footer-bg: #0a0c0a; /* fondo del pie de página */ --tdp-panel: #12140f; /* fondo de tarjetas / paneles */ --tdp-line: #2a2e24; /* bordes y líneas */ --tdp-text: #ecefea; /* texto principal */ --tdp-text-muted: #8c948a; /* texto secundario */ --tdp-green: #4be015; /* acento principal */ --tdp-gold: #f0b429; /* acento secundario */ --tdp-on-accent: #0a0c0a; /* texto sobre botones de acento */ } /* Modo claro */ html[data-theme="light"]{ --tdp-void: #f7f8f4; --tdp-header-bg: #ffffff; --tdp-footer-bg: #ffffff; --tdp-panel: #ffffff; --tdp-line: #dee2d7; --tdp-text: #14170f; --tdp-text-muted: #5b625a; --tdp-green: #2f9e0d; --tdp-gold: #b4790e; --tdp-on-accent: #ffffff; } body{ transition: background-color .25s ease, color .25s ease; } /* ========================================================= RESET BÁSICO ========================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--tdp-void); color:var(--tdp-text); font-family:var(--tdp-font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family:var(--tdp-font-display); font-weight:700; line-height:1.1; margin:0 0 .5em; letter-spacing:-0.01em; } .container{ max-width:1180px; margin:0 auto; padding:0 24px; } /* respeta usuarios con "reducir movimiento" */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* foco visible accesible */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--tdp-green); outline-offset:3px; } /* ========================================================= MOTIVO DE FIRMA: la "línea de sello" — eco del divisor entre "TIENDA" y "DIGITAL PRO" del logo, usado como separador de sección con marcas tipo código de barras. ========================================================= */ .tdp-seal-divider{ display:flex; align-items:center; gap:10px; margin:0 auto 48px; width:220px; } .tdp-seal-divider::before, .tdp-seal-divider::after{ content:''; flex:1; height:2px; background:var(--tdp-line); } .tdp-seal-divider span{ width:6px; height:14px; background:var(--tdp-green); display:inline-block; opacity:.85; } /* ========================================================= HEADER ========================================================= */ .tdp-header{ position:sticky; top:0; z-index:50; background:var(--tdp-header-bg); background:color-mix(in srgb, var(--tdp-header-bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--tdp-line); } .tdp-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; } .tdp-logo{ display:flex; align-items:center; gap:10px; } .tdp-logo img{ height:46px; width:auto; } .tdp-logo span{ font-family:var(--tdp-font-mono); font-size:13px; color:var(--tdp-text-muted); letter-spacing:.08em; text-transform:uppercase; } .tdp-nav ul{ display:flex; gap:28px; } .tdp-nav a{ font-size:15px; color:var(--tdp-text-muted); transition:color .2s; } .tdp-nav a:hover{ color:var(--tdp-green); } .tdp-header__cart a{ font-family:var(--tdp-font-mono); font-size:13px; border:1px solid var(--tdp-line); border-radius:999px; padding:8px 16px; color:var(--tdp-text); } .tdp-header__cart a:hover{ border-color:var(--tdp-green); color:var(--tdp-green); } .tdp-menu-toggle{ display:none; background:none; border:0; color:var(--tdp-text); font-size:26px; } @media (max-width:820px){ .tdp-nav{ display:none; } .tdp-menu-toggle{ display:block; } .tdp-nav.is-open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--tdp-panel); border-bottom:1px solid var(--tdp-line); padding:16px 24px; } .tdp-nav.is-open ul{ flex-direction:column; gap:16px; } } /* ========================================================= HERO — el "sello" como pieza central (thesis visual) ========================================================= */ .tdp-hero{ position:relative; padding:100px 0 90px; text-align:center; overflow:hidden; } .tdp-hero__ring{ position:absolute; top:50%; left:50%; width:640px; height:640px; transform:translate(-50%,-50%); border:1px dashed var(--tdp-line); border-radius:50%; animation:tdp-spin 60s linear infinite; } .tdp-hero__ring::before{ content:''; position:absolute; inset:36px; border:1px dashed var(--tdp-line); border-radius:50%; } @keyframes tdp-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } } .tdp-eyebrow{ font-family:var(--tdp-font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--tdp-green); margin-bottom:18px; display:inline-block; position:relative; } .tdp-hero h1{ position:relative; font-size:clamp(2.4rem, 5.5vw, 4.2rem); max-width:900px; margin-left:auto; margin-right:auto; } .tdp-hero h1 em{ color:var(--tdp-green); font-style:normal; } .tdp-hero p.tdp-lead{ position:relative; max-width:600px; margin:22px auto 34px; color:var(--tdp-text-muted); font-size:1.15rem; } .tdp-hero__ctas{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .tdp-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--tdp-font-mono); font-size:14px; font-weight:500; padding:14px 28px; border-radius:999px; border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; } .tdp-btn--primary{ background:var(--tdp-green); color:var(--tdp-on-accent); } .tdp-btn--primary:hover{ transform:translateY(-2px); filter:brightness(1.12); } .tdp-btn--ghost{ border-color:var(--tdp-line); color:var(--tdp-text); } .tdp-btn--ghost:hover{ border-color:var(--tdp-green); color:var(--tdp-green); } /* Mismos botones, aplicados como bloque nativo "Botón" de Gutenberg (el className del bloque cae en el wrapper, no en el ) */ .wp-block-buttons.tdp-hero__ctas{ display:flex !important; gap:16px !important; justify-content:center !important; flex-wrap:wrap !important; } .wp-block-button.tdp-btn--primary .wp-block-button__link, .wp-block-button.tdp-btn--ghost .wp-block-button__link{ display:inline-flex !important; align-items:center; gap:8px; font-family:var(--tdp-font-mono) !important; font-size:14px !important; font-weight:500 !important; padding:14px 28px !important; border-radius:999px !important; border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; } .wp-block-button.tdp-btn--primary .wp-block-button__link{ background:var(--tdp-green) !important; color:var(--tdp-on-accent) !important; } .wp-block-button.tdp-btn--primary .wp-block-button__link:hover{ transform:translateY(-2px); filter:brightness(1.12); } .wp-block-button.tdp-btn--ghost .wp-block-button__link{ background:transparent !important; border-color:var(--tdp-line) !important; color:var(--tdp-text) !important; } .wp-block-button.tdp-btn--ghost .wp-block-button__link:hover{ border-color:var(--tdp-green) !important; color:var(--tdp-green) !important; } /* ========================================================= "CÓMO FUNCIONA" — 3 pasos reales (sí es una secuencia, por eso usamos numeración aquí) ========================================================= */ .tdp-steps{ padding:70px 0; border-top:1px solid var(--tdp-line); } .tdp-steps__grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:32px !important; margin-top:50px; } .tdp-step{ background:var(--tdp-panel); border:1px solid var(--tdp-line); border-radius:var(--tdp-radius); padding:30px; } .tdp-step__num{ font-family:var(--tdp-font-mono); color:var(--tdp-gold); font-size:13px; border:1px solid var(--tdp-gold); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .tdp-step h3{ font-size:1.15rem; margin-bottom:8px; } .tdp-step p{ color:var(--tdp-text-muted); font-size:.96rem; margin:0; } @media (max-width:820px){ .tdp-steps__grid{ grid-template-columns:1fr !important; } } /* ========================================================= CATÁLOGO / PRODUCTOS — tarjetas tipo "sello verificado" ========================================================= */ .tdp-catalog{ padding:70px 0 90px; } .tdp-catalog__head{ text-align:center; max-width:640px; margin:0 auto 20px; } .tdp-catalog__head p{ color:var(--tdp-text-muted); } .tdp-products{ display:grid; grid-template-columns:repeat(var(--tdp-grid-cols-desktop, 3),1fr); gap:var(--tdp-grid-gap, 28px); margin-top:46px; } @media (max-width:980px){ .tdp-products{ grid-template-columns:repeat(var(--tdp-grid-cols-tablet, 2),1fr); } } @media (max-width:640px){ .tdp-products{ grid-template-columns:repeat(var(--tdp-grid-cols-mobile, 1),1fr); } } .tdp-card{ position:relative; background:var(--tdp-panel); border:1px solid var(--tdp-line); border-radius:var(--tdp-radius); padding:28px; transition:border-color .2s ease, transform .2s ease; } .tdp-card:hover{ border-color:var(--tdp-green); transform:translateY(-4px); } .tdp-card__badge{ position:absolute; top:-12px; right:20px; font-family:var(--tdp-font-mono); font-size:11px; letter-spacing:.05em; background:var(--tdp-void); border:1px solid var(--tdp-gold); color:var(--tdp-gold); padding:5px 10px; border-radius:999px; text-transform:uppercase; } .tdp-card__icon{ width:52px; height:52px; border-radius:14px; background:color-mix(in srgb, var(--tdp-green) 12%, transparent); border:1px solid var(--tdp-line); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--tdp-green); margin-bottom:20px; } .tdp-card h3{ font-size:1.2rem; margin-bottom:8px; } .tdp-card p{ color:var(--tdp-text-muted); font-size:.95rem; margin-bottom:20px; } .tdp-card__meta{ display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--tdp-line); padding-top:16px; } .tdp-card__price{ font-family:var(--tdp-font-mono); color:var(--tdp-green); font-size:1.05rem; } .tdp-card__spec{ font-family:var(--tdp-font-mono); font-size:12px; color:var(--tdp-text-muted); } /* ========================================================= INTEGRACIÓN CON LAS TARJETAS NATIVAS DE WOOCOMMERCE El propio CSS de WooCommerce usa selectores del tipo ".woocommerce ul.products li.product" con flotantes y anchos en %, con más especificidad que un simple "ul.products li.product". Por eso acá igualamos ese prefijo Y usamos !important: así ganamos siempre nosotros, vengan los productos del shortcode [products], del bloque nativo o de la página de tienda (archive-product). ========================================================= */ .woocommerce ul.products, .woocommerce-page ul.products, ul.products{ display:grid !important; grid-template-columns:repeat(var(--tdp-grid-cols-desktop, 3), 1fr) !important; gap:var(--tdp-grid-gap, 28px) !important; margin:0 !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product{ background:var(--tdp-panel) !important; border:1px solid var(--tdp-line) !important; border-radius:var(--tdp-radius) !important; padding:var(--tdp-card-padding, 20px) !important; text-align:left !important; float:none !important; width:auto !important; margin:0 !important; } .woocommerce ul.products li.product img, ul.products li.product img{ border-radius:12px; margin-bottom:14px; } .woocommerce ul.products li.product .price, ul.products li.product .price{ font-family:var(--tdp-font-mono); color:var(--tdp-green) !important; } .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--tdp-font-display) !important; color:var(--tdp-text) !important; } .woocommerce ul.products li.product .button{ font-family:var(--tdp-font-mono); background:var(--tdp-green); color:var(--tdp-on-accent); border-radius:999px; padding:10px 18px; } @media (max-width:980px){ .woocommerce ul.products, .woocommerce-page ul.products, ul.products{ grid-template-columns:repeat(var(--tdp-grid-cols-tablet, 2), 1fr) !important; } } @media (max-width:640px){ .woocommerce ul.products, .woocommerce-page ul.products, ul.products{ grid-template-columns:repeat(var(--tdp-grid-cols-mobile, 1), 1fr) !important; } } /* ========================================================= TOGGLE MODO CLARO / OSCURO ========================================================= */ .tdp-mode-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--tdp-line); background:transparent; color:var(--tdp-text); cursor:pointer; font-size:16px; line-height:1; transition:border-color .2s ease, color .2s ease; } .tdp-mode-toggle:hover{ border-color:var(--tdp-green); color:var(--tdp-green); } .tdp-mode-toggle .tdp-icon-dark{ display:none; } html[data-theme="light"] .tdp-mode-toggle .tdp-icon-light{ display:none; } html[data-theme="light"] .tdp-mode-toggle .tdp-icon-dark{ display:inline; } /* ========================================================= CHECKOUT WOOCOMMERCE — coherencia visual con el tema ========================================================= */ .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{ background:var(--tdp-panel); border:1px solid var(--tdp-line); color:var(--tdp-text); border-radius:10px; padding:10px 14px; } .woocommerce-checkout #payment{ background:var(--tdp-panel); border:1px solid var(--tdp-line); border-radius:var(--tdp-radius); } .woocommerce-checkout .place-order .button{ background:var(--tdp-green) !important; color:var(--tdp-on-accent) !important; border-radius:999px !important; font-family:var(--tdp-font-mono); } /* ========================================================= COMPATIBILIDAD CON EL BLOQUE NATIVO "PRODUCTOS" DE WOOCOMMERCE (Gutenberg) — por si se usa en vez del shortcode [products]. Cubre tanto el bloque clásico "Productos por..." (wc-block-grid) como el bloque moderno "Colección de productos" (wp-block-woocommerce-product-template). ========================================================= */ .wc-block-grid__products, .wp-block-woocommerce-product-template{ display:grid !important; grid-template-columns:repeat(var(--tdp-grid-cols-desktop, 3), 1fr) !important; gap:var(--tdp-grid-gap, 28px) !important; list-style:none !important; } .wc-block-grid__product, .wc-block-product, .wp-block-woocommerce-product-template > li{ background:var(--tdp-panel) !important; border:1px solid var(--tdp-line) !important; border-radius:var(--tdp-radius) !important; padding:var(--tdp-card-padding, 20px) !important; text-align:left !important; width:auto !important; float:none !important; margin:0 !important; } .wc-block-grid__product img, .wc-block-product img, .wp-block-woocommerce-product-template img{ border-radius:12px; margin-bottom:14px; } .wc-block-grid__product-title, .wc-block-components-product-title, .wc-block-product .wp-block-post-title, .wc-block-product .wp-block-post-title a{ font-family:var(--tdp-font-display) !important; color:var(--tdp-text) !important; font-size:1.15rem !important; } .wc-block-grid__product-price, .wc-block-components-product-price, .wc-block-components-product-price__value{ font-family:var(--tdp-font-mono) !important; color:var(--tdp-green) !important; background:none !important; } .wc-block-components-product-button__button, .wc-block-grid__product-add-to-cart .button, .wc-block-product .add_to_cart_button, .wc-block-product .wp-block-button__link{ background:var(--tdp-green) !important; color:var(--tdp-on-accent) !important; border-radius:999px !important; font-family:var(--tdp-font-mono) !important; border:none !important; box-shadow:none !important; } @media (max-width:980px){ .wc-block-grid__products, .wp-block-woocommerce-product-template{ grid-template-columns:repeat(var(--tdp-grid-cols-tablet, 2), 1fr) !important; } } @media (max-width:640px){ .wc-block-grid__products, .wp-block-woocommerce-product-template{ grid-template-columns:repeat(var(--tdp-grid-cols-mobile, 1), 1fr) !important; } } /* ========================================================= CONFIANZA / MERCADO PAGO ========================================================= */ .tdp-trust{ padding:60px 0; border-top:1px solid var(--tdp-line); text-align:center; } .tdp-trust p{ color:var(--tdp-text-muted); max-width:560px; margin:14px auto 0; font-size:.95rem; } .tdp-trust__badges{ display:flex !important; gap:14px !important; justify-content:center !important; flex-wrap:wrap !important; margin-top:22px; } .tdp-trust__badges span, p.tdp-trust__badge{ font-family:var(--tdp-font-mono); font-size:12px; color:var(--tdp-text-muted); border:1px solid var(--tdp-line); border-radius:999px; padding:8px 16px; margin:0; } /* ========================================================= FOOTER ========================================================= */ .tdp-footer{ background:var(--tdp-footer-bg); border-top:1px solid var(--tdp-line); padding:50px 0 30px; } .tdp-footer__grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:30px; } .tdp-footer h4{ font-size:.9rem; color:var(--tdp-text); margin-bottom:14px; } .tdp-footer ul li{ margin-bottom:8px; } .tdp-footer a{ color:var(--tdp-text-muted); font-size:.92rem; } .tdp-footer a:hover{ color:var(--tdp-green); } .tdp-footer__bottom{ border-top:1px solid var(--tdp-line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--tdp-font-mono); font-size:12px; color:var(--tdp-text-muted); } /* ========================================================= PÁGINAS GENÉRICAS (page.php) ========================================================= */ .tdp-page{ padding:80px 0; } .tdp-page__content{ max-width:760px; margin:0 auto; } .tdp-page__content h1{ font-size:2.4rem; margin-bottom:24px; } .tdp-page__content p{ color:var(--tdp-text-muted); }