/* Theme Name: Kubiq Studio Theme URI: https://kubiqstudio.pe Author: Kubiq Studio Author URI: https://kubiqstudio.pe Description: Tema a medida para Kubiq Studio — objetos funcionales de diseño. Minimalista cálido, WooCommerce, tokens de marca. Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kubiq Tags: e-commerce, minimal, custom-menu, featured-images */ /* ========================================================= 1. FUENTES (auto-hospedadas, variables, SIL OFL) ========================================================= */ @font-face { font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/Quicksand-Variable.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/Inter-Variable.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("assets/fonts/JetBrainsMono-Variable.ttf") format("truetype"); } /* ========================================================= 2. TOKENS ========================================================= */ :root { /* neutros */ --ink: #16181D; --graphite: #3A3D45; --stone: #8A8A82; --grey: #797979; --cloud: #EDEBE4; --paper: #FBF8F4; --white: #FFFFFF; /* acentos por colección */ --lab: #2E6E5B; --living: #B8734A; --geek: #3A5CCC; --play: #C9902B; /* acento activo — lo sobreescribe el body por colección */ --accent: var(--ink); /* tipografía */ --font-display: "Quicksand", system-ui, sans-serif; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* escala tipográfica (rem) */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 3rem; --fs-4xl: 4rem; /* espaciado (múltiplos de 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* radios */ --r-chip: 4px; --r-btn: 8px; --r-box: 12px; /* layout */ --wrap: 1120px; --gutter: var(--sp-5); --hairline: 1px solid rgba(138, 138, 130, 0.2); --header-h: 68px; } /* Acentos por colección: la clase la pinta functions.php en */ body.kubiq-col-lab { --accent: var(--lab); } body.kubiq-col-living { --accent: var(--living); } body.kubiq-col-geek { --accent: var(--geek); } body.kubiq-col-play { --accent: var(--play); } body.kubiq-col-sensorial { --accent: var(--play); } /* ========================================================= 3. RESET / BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5vw, var(--fs-3xl)); } h2 { font-size: clamp(1.5rem, 3.5vw, var(--fs-2xl)); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5, h6 { font-size: var(--fs-md); } p { text-wrap: pretty; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-btn) 0; } .skip-link:focus { left: 0; color: var(--paper); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* scrollbar sobrio */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: var(--graphite); } ::-webkit-scrollbar-track { background: var(--cloud); } /* ========================================================= 4. LAYOUT ========================================================= */ .wrap, .k-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .k-section { padding-block: var(--sp-9); } .k-section--tight { padding-block: var(--sp-7); } .k-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; } .k-eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } .k-lead { font-size: var(--fs-lg); color: var(--graphite); max-width: 62ch; } .k-muted { color: var(--graphite); } .k-mono { font-family: var(--font-mono); } .k-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ========================================================= 5. BOTONES ========================================================= */ .btn, .k-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); min-height: 44px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-btn); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; line-height: 1; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .btn:hover, .k-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .wp-block-button__link:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } .k-btn--ghost, .woocommerce a.button.wc-backward { background: transparent; color: var(--ink); border-color: var(--ink); } .k-btn--ghost:hover, .woocommerce a.button.wc-backward:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--ink); border-color: var(--ink); color: var(--paper); } .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--accent); border-color: var(--accent); } /* ========================================================= 6. BADGE DE COLECCIÓN ========================================================= */ .k-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: var(--hairline); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); background: var(--white); } .k-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-dot, var(--stone)); flex: none; } .k-badge[data-col="lab"] { --badge-dot: var(--lab); } .k-badge[data-col="living"] { --badge-dot: var(--living); } .k-badge[data-col="geek"] { --badge-dot: var(--geek); } .k-badge[data-col="play"] { --badge-dot: var(--play); } .k-badge[data-col="objetos-sensoriales"] { --badge-dot: var(--play); } /* ========================================================= 7. HEADER / NAV ========================================================= */ .k-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: var(--hairline); } .k-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .k-logo { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .k-logo img, .k-logo svg { width: 30px; height: 30px; } .k-logo__word { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .k-logo__word span { color: var(--grey); font-weight: 500; } .k-logo:hover .k-logo__word { color: var(--ink); } .k-nav { margin-inline: auto; } .k-nav ul { display: flex; align-items: center; gap: var(--sp-5); } .k-nav a { font-size: var(--fs-sm); font-weight: 500; color: var(--graphite); padding-block: var(--sp-2); position: relative; } .k-nav a:hover, .k-nav .current-menu-item > a { color: var(--ink); } .k-nav .current-menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); } .k-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: auto; } .k-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--hairline); border-radius: var(--r-btn); background: transparent; color: var(--ink); position: relative; transition: border-color .18s ease, background .18s ease; } .k-iconbtn:hover { border-color: var(--accent); color: var(--accent); } .k-iconbtn svg { width: 18px; height: 18px; } .k-cart__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 50px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1; } .k-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; } .k-burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; } body.k-nav-open .k-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.k-nav-open .k-burger span:nth-child(2) { opacity: 0; } body.k-nav-open .k-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* buscador desplegable */ .k-search { display: none; border-top: var(--hairline); background: var(--paper); } body.k-search-open .k-search { display: block; } .k-search form { display: flex; gap: var(--sp-2); max-width: var(--wrap); margin-inline: auto; padding: var(--sp-4) var(--gutter); } .k-search input[type="search"], .k-search input[type="text"] { flex: 1; padding: var(--sp-3) var(--sp-4); background: var(--white); border: var(--hairline); border-radius: var(--r-btn); } .k-search input:focus { outline: none; border-color: var(--accent); } /* menú móvil */ .k-nav-mobile { display: none; border-top: var(--hairline); background: var(--paper); padding: var(--sp-4) var(--gutter) var(--sp-6); } body.k-nav-open .k-nav-mobile { display: block; } .k-nav-mobile ul { display: flex; flex-direction: column; gap: var(--sp-1); } .k-nav-mobile a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-md); font-weight: 500; border-bottom: var(--hairline); } .k-nav-mobile .sub-menu { display: none; padding-left: var(--sp-4); } .k-nav-mobile .is-open > .sub-menu { display: block; } /* aviso superior */ .k-topbar { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-align: center; padding: var(--sp-2) var(--gutter); } .k-topbar a { text-decoration: underline; text-underline-offset: 2px; } .k-topbar a:hover { color: var(--cloud); } /* ========================================================= 8. HERO ========================================================= */ .k-hero { padding-block: clamp(var(--sp-8), 12vw, 140px); border-bottom: var(--hairline); } .k-hero__inner { max-width: 900px; } /* Con foto: dos columnas. Sin foto, el hero sigue siendo tipográfico. */ .k-hero--split { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); } .k-hero--split .k-hero__inner { max-width: var(--wrap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--sp-8); align-items: center; } .k-hero--split .k-hero__text { max-width: 34rem; } .k-hero__media { border-radius: var(--r-box); overflow: hidden; background: var(--cloud); aspect-ratio: 4 / 3; } .k-hero__media img { width: 100%; height: 100%; object-fit: cover; } .k-hero h1 { font-size: clamp(2.25rem, 6.5vw, var(--fs-4xl)); margin-block: var(--sp-4) var(--sp-5); } .k-hero p { font-size: clamp(var(--fs-md), 2vw, var(--fs-lg)); color: var(--graphite); max-width: 56ch; } .k-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } /* manifiesto */ .k-manifest { border-bottom: var(--hairline); padding-block: var(--sp-8); } .k-manifest p { font-family: var(--font-display); font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl)); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; max-width: 40ch; } /* ========================================================= 9. CARDS DE COLECCIÓN ========================================================= */ .k-collections { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .k-col-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); min-height: 200px; background: var(--white); border: var(--hairline); border-radius: var(--r-box); transition: border-color .18s ease, transform .18s ease; } .k-col-card:hover { border-color: var(--card-accent, var(--ink)); transform: translateY(-2px); color: inherit; } .k-col-card[data-col="lab"] { --card-accent: var(--lab); } .k-col-card[data-col="living"] { --card-accent: var(--living); } .k-col-card[data-col="geek"] { --card-accent: var(--geek); } .k-col-card[data-col="play"] { --card-accent: var(--play); } .k-col-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent, var(--stone)); } .k-col-card h3 { font-size: var(--fs-lg); } .k-col-card p { font-size: var(--fs-sm); color: var(--graphite); } .k-col-card__more { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-accent, var(--ink)); } /* ========================================================= 10. PRODUCT CARD ========================================================= */ .container-products, .k-products, .woocommerce ul.products { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; } /* Neutraliza el layout flotado por defecto de WooCommerce en los loops. */ .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; list-style: none; } .woocommerce ul.products li.product::before { display: none; } /* WooCommerce pinta los precios de sus loops en verde (#77a464) con más especificidad que la card del tema. Se recupera el token de marca. */ .woocommerce ul.products li.product .price, .woocommerce div.product .item-product .price { color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; margin: 0; } .woocommerce ul.products li.product .price del, .woocommerce div.product .item-product .price del { color: var(--stone); font-size: inherit; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce ul.products li.product a img { margin: 0; box-shadow: none; } .woocommerce ul.products li.product .item-product__hook { color: var(--graphite); } /* Pocas piezas: tracks acotados y centrados para no dejar cards huérfanas. */ .container-products.is-few { grid-template-columns: repeat(auto-fill, minmax(230px, 290px)); justify-content: center; } .item-product { display: flex; flex-direction: column; background: var(--white); border: var(--hairline); border-radius: var(--r-box); overflow: hidden; position: relative; transition: border-color .18s ease, transform .18s ease; } .item-product:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; } .item-product > .img { position: relative; aspect-ratio: 1 / 1; background: var(--cloud); overflow: hidden; } .item-product > .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .item-product:hover > .img img { transform: scale(1.03); } .item-product .img__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--stone); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; } .item-product .text { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); } .item-product .k-badge { align-self: flex-start; } .title-item-product { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; } .item-product__hook { font-size: var(--fs-sm); line-height: 1.45; color: var(--graphite); margin-top: calc(var(--sp-1) * -1); } .item-product .price { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); display: flex; align-items: baseline; gap: var(--sp-2); } .item-product .price del, .item-product .price .price-old-product { color: var(--stone); font-weight: 400; text-decoration: line-through; } .item-product .price ins { text-decoration: none; } .onsale, .rb_onsale, .k-onsale { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; padding: var(--sp-1) var(--sp-2); background: var(--ink); color: var(--paper); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; } /* ========================================================= 10-bis. MEDIOS DE PAGO Y ETIQUETA «PRONTO» ========================================================= */ .k-pay { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } .k-pay__title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); } .k-pay__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .k-pay__item { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 var(--sp-2); border: var(--hairline); border-radius: var(--r-chip); background: var(--white); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--graphite); } .k-pay__item img { height: 18px; width: auto; } .k-soon { display: inline-block; margin-left: var(--sp-2); padding: 1px var(--sp-2); border: var(--hairline); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); vertical-align: middle; } /* En la navegación el aviso va sin recuadro, para no romper el ritmo. */ .k-nav .k-soon, .k-nav-mobile .k-soon { border: 0; padding: 0; margin-left: var(--sp-1); letter-spacing: 0.06em; } .k-nav .menu-item--empty > a, .k-nav-mobile .menu-item--empty > a { color: var(--stone); } .k-col-card--soon { background: transparent; } .k-col-card--soon .k-col-card__more { color: var(--stone); } .k-empty { grid-column: 1 / -1; padding: var(--sp-8) var(--sp-5); text-align: center; border: 1px dashed rgba(138, 138, 130, .4); border-radius: var(--r-box); color: var(--graphite); } .k-empty p + p { margin-top: var(--sp-3); } /* ========================================================= 11. BLOQUE CONFIANZA / ESTUDIO / IG ========================================================= */ .k-trust { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: var(--sp-7) 0; border-block: var(--hairline); } .k-trust__item h4 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-2); } .k-trust__item p { font-size: var(--fs-sm); color: var(--graphite); } .k-studio { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .k-studio__media { aspect-ratio: 4 / 3; background: var(--cloud); border-radius: var(--r-box); display: grid; place-items: center; padding: var(--sp-7); } .k-studio__media img { width: min(180px, 60%); opacity: .9; } /* ========================================================= 12. ARCHIVO / COLECCIÓN ========================================================= */ .k-archive__head { padding-block: var(--sp-7); border-bottom: var(--hairline); } .k-archive__head .k-badge { margin-bottom: var(--sp-3); } .k-archive__head p { margin-top: var(--sp-3); } .woocommerce-result-count, .woocommerce-ordering { display: none; } .k-breadcrumb { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--stone); padding-block: var(--sp-4); } .k-breadcrumb a { color: var(--graphite); } .k-breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .k-breadcrumb .breadcrumb_last { color: var(--ink); } .k-breadcrumb span[aria-hidden] { color: var(--stone); padding-inline: 2px; } /* ========================================================= 13. PÁGINA / ENTRADA ========================================================= */ .k-page { padding-block: var(--sp-8); } .k-page__header { margin-bottom: var(--sp-6); } .k-prose { max-width: 72ch; } .k-prose > * + * { margin-top: var(--sp-4); } .k-prose h2 { margin-top: var(--sp-7); } .k-prose h3 { margin-top: var(--sp-6); } .k-prose ul, .k-prose ol { padding-left: var(--sp-5); } .k-prose ul li { list-style: disc; } .k-prose ol li { list-style: decimal; } .k-prose li + li { margin-top: var(--sp-2); } .k-prose a:not(.wp-block-button__link):not(.btn):not(.k-btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Los bloques de WooCommerce traen su propio marcado de listas. */ .k-prose [class*="wc-block"] li, .k-prose [class*="woocommerce"] li { list-style: none; } .k-prose img { border-radius: var(--r-box); } .k-prose blockquote { border-left: 2px solid var(--stone); padding-left: var(--sp-4); color: var(--graphite); font-style: italic; } .k-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .k-prose th, .k-prose td { border: var(--hairline); padding: var(--sp-3); text-align: left; } .k-prose th { background: var(--cloud); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; } .k-prose code { font-family: var(--font-mono); font-size: .9em; background: var(--cloud); padding: 2px 5px; border-radius: var(--r-chip); } .k-posts { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .k-post-card { display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--r-box); overflow: hidden; background: var(--white); transition: border-color .18s ease, transform .18s ease; } .k-post-card:hover { border-color: var(--accent); transform: translateY(-2px); } .k-post-card__img { aspect-ratio: 16 / 10; background: var(--cloud); } .k-post-card__img img { width: 100%; height: 100%; object-fit: cover; } .k-post-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .k-post-card time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--stone); letter-spacing: .06em; } .pagination, .woocommerce-pagination { display: flex; justify-content: center; gap: var(--sp-2); padding-block: var(--sp-7); font-family: var(--font-mono); font-size: var(--fs-sm); } .pagination a, .pagination span, .woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--sp-2); border: var(--hairline); border-radius: var(--r-btn); } .pagination .current, .woocommerce-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); } .woocommerce-pagination ul { display: flex; gap: var(--sp-2); border: 0 !important; } .woocommerce-pagination ul li { border: 0 !important; } /* ========================================================= 14. WOOCOMMERCE — FICHA DE PRODUCTO ========================================================= */ .k-single-product { padding-block: var(--sp-7); } .woocommerce div.product { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce div.product .woocommerce-product-gallery__image { width: 100%; } .woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; } .woocommerce div.product .summary { grid-column: 2; width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells, .woocommerce div.product .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* WooCommerce arranca la galería en opacity:0 y la revela por JS: la foto principal es el LCP de la ficha y no debe depender de que el script cargue. Se muestra desde el primer pintado y se ocultan las secundarias hasta que flexslider envuelve el wrapper en .flex-viewport (ahí deja de aplicar). */ .woocommerce div.product .woocommerce-product-gallery { opacity: 1 !important; } .woocommerce div.product > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none; } .woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: var(--r-box); overflow: hidden; } .woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--r-box); background: var(--cloud); } .woocommerce div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); } .woocommerce div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; } .woocommerce div.product .flex-control-thumbs img { border-radius: var(--r-chip); border: var(--hairline); } .woocommerce div.product .product_title { font-size: clamp(1.75rem, 4vw, var(--fs-2xl)); margin-bottom: var(--sp-3); } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 500; color: var(--ink); margin-block: var(--sp-3); } .woocommerce div.product p.price del { color: var(--stone); font-size: var(--fs-md); } .woocommerce div.product p.price ins { text-decoration: none; } .woocommerce div.product form.cart { margin-block: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .woocommerce div.product form.cart .variations { width: 100%; } .woocommerce .quantity .qty { width: 72px; min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: center; border: 1px solid var(--ink); border-radius: var(--r-btn); background: var(--white); font-family: var(--font-mono); } .k-specs { margin-top: var(--sp-5); border-top: var(--hairline); } .k-specs h3 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-block: var(--sp-5) var(--sp-3); } .k-specs dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); } .k-specs dt { font-family: var(--font-mono); color: var(--stone); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; } .k-specs dd { color: var(--graphite); } .k-delivery { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--hairline); font-size: var(--fs-sm); color: var(--graphite); } .k-delivery h3 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-3); } .k-delivery p + p { margin-top: var(--sp-2); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--sp-5); padding: 0; margin-bottom: var(--sp-5); border-bottom: var(--hairline); } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--sp-3) 0 !important; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--stone) !important; border-bottom: 2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink) !important; border-bottom-color: var(--accent); } .related > h2, .upsells > h2, .cross-sells > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); padding-top: var(--sp-7); border-top: var(--hairline); } /* ========================================================= 15. WOOCOMMERCE — CARRITO / CHECKOUT / CUENTA / AVISOS ========================================================= */ .woocommerce table.shop_table { border: var(--hairline); border-radius: var(--r-box); border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .woocommerce table.shop_table th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); background: var(--cloud); } .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: var(--sp-3) var(--sp-4); } .woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); } .woocommerce .amount, .woocommerce-Price-amount { font-family: var(--font-mono); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .select2-container .select2-selection--single { width: 100%; min-height: 44px; padding: var(--sp-3); background: var(--white); border: var(--hairline); border-radius: var(--r-btn); } .woocommerce form .form-row label { font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-1); display: block; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { border-top: 0 !important; border: var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-btn); background: var(--white); padding: var(--sp-4) var(--sp-5) !important; font-size: var(--fs-sm); margin-bottom: var(--sp-5) !important; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-error { border-left-color: #B8434A; } /* ========================================================= 15-bis. WOOCOMMERCE BLOCKS (carrito y pago en bloques) ========================================================= */ .wc-block-components-button:not(.is-link) { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-btn); min-height: 48px; font-family: var(--font-sans); font-weight: 600; transition: background .18s ease, border-color .18s ease; } .wc-block-components-button:not(.is-link):hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } .wc-block-components-button.is-link { color: var(--accent); } .wc-block-components-product-price, .wc-block-components-totals-item__value, .wc-block-components-formatted-money-amount, .wc-block-components-order-summary-item__total-price { font-family: var(--font-mono); } .wc-block-components-title, .wp-block-woocommerce-cart-order-summary-heading-block { font-family: var(--font-sans); letter-spacing: -0.01em; } .wc-block-components-text-input input, .wc-block-components-select select, .wc-block-components-textarea { border-radius: var(--r-btn) !important; border-color: rgba(138, 138, 130, .35) !important; background: var(--white) !important; } .wc-block-components-text-input.is-active label, .wc-block-components-text-input input:focus { border-color: var(--accent) !important; } .wc-block-cart-items__row, .wc-block-components-sidebar, .wc-block-components-panel { border-color: rgba(138, 138, 130, .2) !important; } .wc-block-components-product-image img, .wc-block-cart-item__image img { border-radius: var(--r-chip); background: var(--cloud); } /* ========================================================= 16. FOOTER ========================================================= */ .k-footer { margin-top: var(--sp-9); border-top: var(--hairline); background: var(--white); padding-block: var(--sp-8) var(--sp-5); } .k-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1.4fr repeat(3, 1fr); } .k-footer h4 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-4); } .k-footer ul { display: flex; flex-direction: column; gap: var(--sp-2); } .k-footer a, .k-footer p { font-size: var(--fs-sm); color: var(--graphite); } .k-footer a:hover { color: var(--ink); } .k-footer__brand .k-logo { margin-bottom: var(--sp-4); } .k-footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } .k-footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border: var(--hairline); border-radius: var(--r-btn); } .k-footer__social a:hover { border-color: var(--accent); color: var(--accent); } .k-footer__social svg { width: 16px; height: 16px; } .k-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--hairline); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--stone); } .k-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .k-claims img { max-width: 160px; } /* ========================================================= 17. WHATSAPP FLOTANTE ========================================================= */ .k-wa { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--paper); border-radius: 50px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; box-shadow: 0 2px 12px rgba(22, 24, 29, .16); transition: background .18s ease; } .k-wa:hover { background: var(--graphite); color: var(--paper); } .k-wa svg { width: 18px; height: 18px; flex: none; } .k-wa__label { display: inline; } /* ========================================================= 18. RESPONSIVE ========================================================= */ @media (max-width: 960px) { .k-hero--split .k-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); } .k-hero--split .k-hero__media { order: -1; aspect-ratio: 16 / 10; } .k-footer__grid { grid-template-columns: 1fr 1fr; } .woocommerce div.product { grid-template-columns: 1fr; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .summary { grid-column: 1; } .k-studio { grid-template-columns: 1fr; } } @media (max-width: 780px) { :root { --gutter: var(--sp-4); } .k-nav { display: none; } .k-burger { display: flex; } .k-section { padding-block: var(--sp-7); } .container-products, .k-products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4); } .k-wa__label { display: none; } .k-wa { padding: var(--sp-3); } } @media (max-width: 560px) { .k-footer__grid { grid-template-columns: 1fr; } .k-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================= 19. TEMA OSCURO (opcional, activable con data-theme="dark") ========================================================= */ html[data-theme="dark"] { --ink: #F2F1EC; --graphite: #C4C3BC; --stone: #7B7B74; --cloud: #1B1E23; --paper: #0F1114; --white: #15181C; } html[data-theme="dark"] .k-topbar { background: var(--cloud); color: var(--ink); } html[data-theme="dark"] .k-btn, html[data-theme="dark"] .btn { color: var(--paper); } /* ========================================================= 20. IMPRESIÓN ========================================================= */ @media print { .k-header, .k-footer, .k-wa, .k-topbar { display: none !important; } body { background: #fff; color: #000; } }