/* Línea Outlet — design tokens & base styles */ :root { /* [LINEA-OUTLET · BLOQUE 6] Paleta 1 · carbón, hueso, rojo outlet, verde nivel, gris piedra. Los nombres de token se conservan (kb-orange, kb-pink, kb-b2b…) para no tocar 4 000 reglas; lo que cambia es el color que pintan. */ /* [LINEA-OUTLET · BLOQUE 22] EL HUESO SE VA. La escala entera pasa a neutra de verdad. El dueño lo dijo mirando el teléfono: «el beige en buscador y en menú hace que se vean sin vida». Medido, tenía razón y por un motivo más preciso que el gusto: hueso #F4F1EB contra el papel → 1,13:1 línea #E8E4DC contra el papel → 1,27:1 franja #F6EFE0 contra el papel → 1,14:1 borde #D3CEC4 contra el papel → 1,57:1 1,13:1 es demasiado poco para leerse como una superficie distinta y demasiado desplazado de tono para leerse como blanco: se percibe como suciedad, no como capa. El beige estaba pagando el precio de un color (ensuciar) sin dar el beneficio (estructurar). El motivo de fondo es que TODA la escala vivía en el mismo matiz —cream 40°, yellow-soft 41°, line 40°, line-strong 40°, mute2 37°, dorado 39°— y un neutro cálido sólo se lee «cálido» al lado de un neutro de verdad; solo, se lee «blanco que amarilleó». Y entre #D3CEC4 (1,57:1) y #8D8880 (3,52:1) la escala saltaba sin pasar por ningún gris que llegara a 3:1, que es lo que hace falta para DIBUJAR un campo. Todo estaba relleno y nada estaba dibujado. Lo que sustituye al beige, en este orden: aire, filete decorativo, un paso de valor en paneles grandes y, cuando hace falta peso, inversión a tinta. Nunca sombra ni degradado. Las medidas de aquí abajo NO son de adorno: tests/paleta-neutra.test.js las calcula. */ --kb-orange: #B8322F; /* rojo outlet (primario de la marca) */ --kb-orange-deep: #8E2522; /* Variante para TEXTO pequeño sobre fondo claro: #A32C29 da 6.8:1 sobre hueso (AA). */ --kb-orange-text: #A32C29; /* [BLOQUE 22] El dorado NO es un neutro y se queda como está. La propuesta lo convertió en latón oscuro #7A5C1E porque como RELLENO sobre blanco mide 1,99:1 — es verdad, y sigue pendiente. Pero medido en la hoja, este token es sobre todo el ACENTO SOBRE CARBÓN: unas cincuenta reglas del tipo `background: var(--kb-ink); color: var(--kb-yellow)`, el pie, las pestañas activas, el punto de venta. Ahí da 9,18:1, que está bien. Cambiarlo de golpe habría tumbado ese acento a 2,94:1 en todas ellas para arreglar el sello. Son dos hallazgos distintos y el segundo se arregla aparte, con su propio token para superficie clara. */ --kb-yellow: #D9B26A; /* dorado · acento sobre carbón */ --kb-yellow-soft: #F4F4F5; /* [BLOQUE 22] alias de cream; la franja ya no lo usa */ --kb-cream: #F4F4F5; /* [BLOQUE 22] superficie suave, sólo en paneles grandes */ --kb-paper: #FFFFFF; --kb-ink: #15141A; /* carbón */ --kb-charcoal: #15141A; --kb-line: #E3E3E5; /* filete DECORATIVO (1,28:1): divisores, filas, no controles */ /* [BLOQUE 22] El arreglo central: por fin existe un gris con el que dibujar. Borde FUNCIONAL a 3,44:1 sobre el papel y 3,13:1 sobre la superficie suave — input del buscador, botón secundario, chips, casillas. El anterior daba 1,57:1: en la práctica, no había borde. */ --kb-line-strong: #8A8A8E; --kb-muted: #5C5A60; /* [BLOQUE 22] Venía documentado como si cumpliera y daba 3,52:1 sobre blanco y 3,12:1 sobre el hueso: incumplía la regla de 4,5:1 para texto desde antes de esta paleta, y era parte de lo que se veía desvaído. Ahora 5,38:1 sobre papel y 4,89:1 sobre la superficie suave. La propuesta decía #6E6E73 (5,07:1 y 4,61:1). Se usa un punto más oscuro a propósito: con 4,61:1 el margen sobre la superficie suave es de una centésima larga, y esta hoja pinta paneles con ese fondo por todas partes. Mismo tono neutro, más margen. */ --kb-mute2: #6A6A6F; /* gris de texto terciario */ /* Acentos */ --kb-red: #B8322F; --kb-green: #0E6B5E; /* [LINEA-OUTLET · BLOQUE 13] En esta marca NO hay azul. Los cuatro tokens "azules" que quedaban del clon (--kb-blue, --kb-blue-deep y --kb-info en #1F5BA8, y el fondo --kb-blue-soft #E4ECF7) pintaban en realidad TRES papeles: fondo suave, borde de acento y texto de información. Se traducen a la escala neutra de la paleta 1, que es la única que no miente: un neutro no promete "nivel" (verde) ni "acción" (rojo) donde no los hay. Los sitios de esta hoja que SÍ hablan de nivel o de acción dejaron de colgar de estos tokens y piden el suyo (--kb-b2b, --kb-orange-text) uno por uno, más abajo; lo que sigue usándolos es JSX que no es de este encargo (la portada vieja, page-builder, growth-features, admin-crud). El NOMBRE se conserva, como en el bloque 6: lo que cambia es el color. --kb-blue-soft = superficie suave · fondo suave (tinta #15141A: 16,66:1 ✓) --kb-blue = gris de borde · borde/acento (3,44:1 sobre blanco ✓, mínimo 3:1 de objeto gráfico) [BLOQUE 22] Los dos seguían al hueso y al gris piedra; ahora siguen a la escala neutra (#F4F4F5 y #8A8A8E). El papel que pintan no cambia; el tono, sí. --kb-blue-deep = carbón #15141A · texto de información (18,31:1 ✓) --kb-info = gris #5C5A60 · texto secundario (6,80:1 ✓) [MEDIDO · el único sitio donde --kb-blue-deep no es texto] La barra de estado del pedido (admin-crud, ST_SEG_COLOR) lo usa como tramo de en medio entre --kb-yellow y --kb-success. Entre tramos vecinos el mínimo es 3:1: con el azul daban 3,37:1 (dorado) y 1,05:1 (verde); con el carbón dan 9,18:1 y 2,86:1. Ningún neutro de la paleta despega del verde de nivel —su luminancia cae justo en medio de la escala— así que el carbón es el mejor par posible y el conjunto mejora mucho; además cada tramo lleva su rótulo al lado, así que el color no es lo único que lo dice. Se borra --kb-brown (#6B4E2E): cero referencias en todo el repo y el café tampoco está en la paleta — un token que nadie usa no significa nada. */ --kb-blue: #8A8A8E; --kb-pink: #E3E3E5; --kb-pink-deep: #B8322F; --kb-pink-soft: #F4F4F5; --kb-blue-deep: #15141A; --kb-blue-soft: #F4F4F5; --kb-success: #0E6B5E; /* verde nivel (mayoreo / distribuidor alcanzado) */ --kb-danger: #B8322F; --kb-info: #5C5A60; --kb-b2b: #0E6B5E; /* nivel mayoreo/distribuidor */ --kb-b2b-soft: #E3F1EE; /* [LINEA-OUTLET · BLOQUE 22] EL VERDE, UN PELDAÑO MÁS CLARO, SÓLO PARA FONDOS OSCUROS. El dueño pidió —con captura— la etiqueta de distribuidores en verde en el cajón del menú. El cajón pasa a carbón, y ahí el verde de la casa cae a 2,86:1 como objeto: no llega al mínimo de 3:1 y la etiqueta se vería como una mancha. La corrección NO es quitarle el color: es subirlo un peldaño de claridad sin moverlo de sitio. Es LITERALMENTE el mismo verde —mismo matiz 172°, misma saturación 77 %, claridad 24 % → 27 %— y da 3,50:1 contra el carbón con el blanco encima a 5,23:1. Sobre fondo claro NO se usa: ahí manda --kb-b2b. */ --kb-b2b-on-dark: #107A6B; /* [LINEA-OUTLET · BLOQUE 23] LOS DOS BLOQUES DE LA ESCALERA DE PRECIO. El dueño los pidió "naranja con blanco" y "azul cielo con blanco". Medidos, ni uno ni otro aguantan letra blanca: el naranja #F57C00 da 2,70:1 y el azul cielo #87CEEB da 1,74:1, cuando el mínimo para texto es 4,5. Se le enseñaron las dos salidas —conservar el color y poner la letra en tinta, u oscurecer el color hasta que el blanco se lea— y eligió la segunda: el naranja hasta óxido y el azul cielo hasta marino. --kb-nivel-aviso blanco encima 5,18:1 ✓ · como objeto sobre el papel 5,18:1 ✓ --kb-nivel-accion blanco encima 5,93:1 ✓ · como objeto sobre el papel 5,93:1 ✓ El azul es el único de toda la hoja, y entra por decisión expresa del dueño: el bloque 13 había retirado los cuatro azules heredados con la regla "en esta marca NO hay azul". Vive sólo aquí, en el botón que sube el pedido al siguiente nivel. */ --kb-nivel-aviso: #C2410C; /* óxido · "te faltan N piezas para bajar a X" */ --kb-nivel-accion: #0369A1; /* marino · "agregar N piezas y bajar el precio" */ --kb-nivel-accion-hover: #075985; /* el mismo marino pulsado · blanco encima 7,56:1 */ /* [LINEA-OUTLET · BLOQUE 25] UN COLOR POR ACORDE OLFATIVO. Encargo del dueño: "ponle color a la ficha, se ve muy simple". Son DOCE y están cerrados en ACORDE_LABEL (product-sensory.jsx): ni uno más puede aparecer sin pasar por ahí, así que la lista se puede exigir entera — y tests/acordes-con-color.test.js la exige. El color aquí es REDUNDANTE: el nombre del acorde va escrito en tinta al lado. Quien no distinga "especiado" de "dulce" por el tono los lee igual. Por eso doce cálidos vecinos no rompen nada: el color ayuda a barrer la lista, no carga la información. Todos miden 3:1 o más contra el riel de la barra, que es el mínimo de objeto gráfico (el más flojo es cítrico con 4,61:1), y 4,5:1 o más como texto sobre el papel por si alguna vez se usan escritos. El VERDE es el único que tenía que negociarse: el verde de esta casa significa "nivel de mayoreo alcanzado" y nada más. El acorde verde va en oliva, a 97° de matiz del de nivel. */ --kb-ac-citrico: #8A6A00; /* cítrico */ --kb-ac-frutal: #A3283F; /* frutal */ --kb-ac-floral: #A83E63; /* floral */ --kb-ac-amaderado: #6B4423; /* amaderado */ --kb-ac-especiado: #9C3B1E; /* especiado */ --kb-ac-dulce: #7D5320; /* dulce */ --kb-ac-resinoso: #8A5300; /* resinoso */ --kb-ac-almizclado: #6B6156; /* almizclado */ --kb-ac-cuero: #4E3524; /* cuero */ --kb-ac-verde: #5C6B2E; /* verde */ --kb-ac-acuatico: #0E6285; /* acuático */ --kb-ac-polvoso: #6F5F7A; /* polvoso */ /* [LINEA-OUTLET · BLOQUE 22] LO QUE SE PINTA ENCIMA DEL CARBÓN. La hoja ya tenía superficies oscuras —el pie, el azulejo grande de la vitrina, el total del punto de venta— pero ninguna familia que dijera qué color va encima: se resolvían con --kb-line-strong (un color de BORDE haciendo de texto) o con literales. Ahora hay una, y la usan la franja de aviso y el cajón del menú. Medido contra la tinta #15141A: --kb-ink-fg 18,31:1 texto principal --kb-ink-fg2 7,55:1 texto secundario, rótulos de grupo, el pie del cajón --kb-ink-line 3,19:1 divisor — objeto gráfico, no texto --kb-ink-hover 1,17:1 fila pulsada: es un ESTADO pasajero, no un borde ni un rótulo, y nunca es la única señal de nada */ --kb-ink-fg: #FFFFFF; --kb-ink-fg2: #A8A5AE; --kb-ink-line: #67656D; --kb-ink-hover: #24222A; /* El velo es lo que despega el cajón de la página, y por eso el cajón no lleva sombra. Con el panel en carbón la separación contra la página velada es de 5,32:1; con el panel blanco que proponía la paleta A habría sido de 3,44:1. */ --kb-scrim: rgba(21, 20, 26, 0.5); --kb-focus: #15141A; /* :focus-visible en tinta: sin azul de navegador, sin resplandor */ /* Density (overridden by JS) */ --kb-row-py: 10px; --kb-row-px: 14px; --kb-card-pad: 14px; --kb-gap: 14px; --kb-fs-base: 13.5px; /* [LINEA-OUTLET · BLOQUE 27] EL TAMAÑO DE LAS REJILLAS DE PRODUCTO, EN DOS NÚMEROS. Pregunta del dueño: "¿dónde se puede ajustar el tamaño de grid en el sitio?". La respuesta honesta era: en seis sitios y ninguno evidente — la portada decía 5 columnas, 4 bajo 1100px y 3 bajo 900px; el catálogo 4, 3 y 2 repartidos en cuatro bloques @media. Ahora el número de columnas lo decide el ANCHO MÍNIMO DE FICHA, que es lo que de verdad se quiere controlar: "que la ficha no baje de tanto". El navegador mete las que quepan. Subir el número = fichas más grandes y menos por fila. Bajarlo = al revés. Y las pantallas intermedias dejan de necesitar excepciones. */ --lo-tile-min: 260px; /* azulejo de la portada */ --kb-card-min: 260px; /* ficha del catálogo */ --kb-radius: 6px; --kb-radius-lg: 12px; --kb-shadow-sm: 0 1px 0 rgba(21,17,11,0.04), 0 1px 2px rgba(21,17,11,0.06); --kb-shadow: 0 2px 6px rgba(21,17,11,0.06), 0 8px 24px rgba(21,17,11,0.06); --kb-shadow-lg: 0 12px 40px rgba(21,17,11,0.18); /* [LINEA-OUTLET · BLOQUE 22] LA VOZ DE LA CASA. Lo que había era heredado del clon: Bricolage Grotesque, una grotesca de tamaños ópticos anchos y dibujo juguetón —la voz del antojo, no la de una perfumería—; Cormorant Garamond, una garalda de ojo muy pequeño que a 15-17 px en el teléfono se vuelve filiforme; y Hanken Grotesk de interfaz, una CUARTA familia que no añadía jerarquía: dos grotescas parecidas a la vez dan ritmo turbio, porque el ojo no sabe si el cambio significa algo. Ahora son tres, y la jerarquía la hacen el peso y el tamaño dentro de una familia. OJO, y queda escrito porque no da error en ninguna parte: Instrument Sans es variable de 400 a 700 y no tiene 800 ni 900. La hoja los declara en 65 sitios y el JSX en 143 más, heredados de una familia que sí llegaba a 800. El navegador recorta al máximo disponible, así que lo que se pinta es 700 — el mismo resultado se declare 700, 800 o 900. No se reescriben las 208 declaraciones: sería un cambio enorme, sin ninguna diferencia en pantalla y con riesgo de tocar de paso media docena de vistas del panel. La consecuencia de verdad es otra y hay que verla en pantalla, no en el código: la voz de la casa se aligera un paso arriba. Era parte de lo que se buscaba. */ --kb-font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; /* Serif de la vitrina (nombres de perfume). EB Garamond es una Garamond de TEXTO: trazo más firme y ojo mayor que la anterior, que en la retícula de dos columnas del móvil se rompía. Nunca para cifras — ver la regla de los precios más abajo. */ --kb-font-serif: "EB Garamond", Georgia, "Times New Roman", serif; /* La misma que display, a propósito: una familia menos que descargar. */ --kb-font-ui: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --kb-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; } [data-density="compact"] { --kb-row-py: 6px; --kb-row-px: 10px; --kb-card-pad: 10px; --kb-gap: 10px; --kb-fs-base: 12.5px; } [data-density="comfy"] { --kb-row-py: 14px; --kb-row-px: 18px; --kb-card-pad: 18px; --kb-gap: 20px; --kb-fs-base: 14.5px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--kb-font-ui); font-size: var(--kb-fs-base); color: var(--kb-ink); background: var(--kb-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* App shell */ .kb-app { min-height: 100vh; display: flex; flex-direction: column; } /* Top utility bar (negro) */ .kb-topbar { background: var(--kb-ink); color: rgba(255,255,255,0.78); font-family: var(--kb-font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 6px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; /* Con los accesos editables el ancho deja de ser fijo. Sin `wrap`, los ítems de flex no bajan de su min-content y el sobrante lo recorta en SILENCIO el overflow-x: clip de html/body/.kb-app (más abajo en este archivo). Prefiero que la barra crezca hacia abajo antes que cortar una palabra a la mitad. */ flex-wrap: wrap; } .kb-topbar-tools { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; } .kb-topbar-tool { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 2px 4px; } .kb-topbar-tool:hover { color: var(--kb-yellow); } .kb-topbar-tool b { color: #fff; font-weight: 600; } .kb-topbar-meta { display: flex; gap: 14px; opacity: 0.7; } .kb-topbar-meta b { color: var(--kb-yellow); } /* [CLS-TOPBAR-ROTA] El anuncio de la barra rota cada 6 s entre los mensajes que el dueño separa con "||" en Admin (chrome.jsx → AnnounceRotator), y esos mensajes no miden lo mismo. Cuando se pintaba solo el del turno, el hueco medía lo que midiera ÉL: la franja pasaba de un renglón a dos y volvía en cada vuelta, empujando toda la página hacia abajo. Medido en Chrome real contra producción a 1550 px de ancho: alturas de `.kb-topbar` [30, 63] y CLS acumulado 1,5154 en 22 s (el umbral "bueno" de Google es 0,1). Aquí van TODOS los mensajes uno encima de otro en la MISMA celda del grid: el navegador la mide con el más grande y ya no la vuelve a medir, así que el alto deja de depender de cuál esté visible — en CUALQUIER ancho y con CUALQUIER par de mensajes. Rotar solo cambia la `visibility`. [CLS-TOPBAR-HUECO] `justify-items` cumple DOS cosas y por eso no puede faltar ni ser cualquiera: 1. Que NO sea el valor inicial (`stretch`): si los mensajes se estiran al ancho de la celda, la pastilla de color de un tema —el `style` con fondo que pone AnnounceRotator— deja de ceñirse a su texto y pinta una barra del ancho del mensaje más largo. 2. `end` y no `start`, porque reservar el mensaje más largo deja ~62 px sobrando cuando se ve el CORTO y hay que elegir de qué lado caen. Esta celda va DENTRO de `.kb-topbar-meta`, el grupo de la derecha (anuncio · ES-MX · MXN $): con `start` el sobrante quedaba entre el mensaje y su "·" y partía en dos un texto que se lee seguido —medido con Chrome real a 1920 px con el mensaje corto a la vista: 76 px hasta el "·" en vez de los 14 px del `gap`, con el "·" flotando solo en mitad del renglón—. Con `end` el mensaje vuelve a pegarse a su separador y los 62 px se van al hueco que YA existe entre los accesos de la izquierda y el grupo de la derecha, donde no se ven. En el ancho donde la barra parte en dos renglones el sobrante queda como una sangría del anuncio, que es lo mismo que ya hace el espacio en blanco de al lado. (`end` es lógico, no "derecha": sigue la dirección del texto.) */ .kb-announce-rot { display: inline-grid; justify-items: end; } .kb-announce-rot > .kb-announce-msg { grid-area: 1 / 1; } /* Mega menu */ .kb-megabox { position: relative; display: flex; align-items: stretch; } .kb-mega { position: absolute; top: 100%; left: 0; right: auto; background: #fff; border: 1px solid var(--kb-line); border-top: 3px solid var(--kb-orange); box-shadow: var(--kb-shadow); padding: 22px; min-width: 720px; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; border-radius: 0 0 12px 12px; } .kb-mega h6 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-orange-deep); } .kb-mega ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .kb-mega li { font-size: 12.5px; padding: 4px 0; cursor: pointer; } .kb-mega li:hover { color: var(--kb-orange-deep); padding-left: 4px; } .kb-mega .kb-mega-feat { background: var(--kb-cream); border-radius: 8px; padding: 14px; } .kb-mega .kb-mega-feat h5 { font-family: var(--kb-font-display); font-size: 14px; margin: 0 0 4px; } .kb-mega .kb-mega-feat p { font-size: 11.5px; color: var(--kb-muted); margin: 0; line-height: 1.4; } /* Split screen B2C/B2B */ .kb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .kb-split-card { position: relative; overflow: hidden; border-radius: 14px; padding: 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform .15s; border: 1px solid var(--kb-line); } .kb-split-card:hover { transform: translateY(-2px); } /* [LINEA-OUTLET · BLOQUE 13] Las dos mitades hablaban con colores prestados: el naranja flúor #FFA500 y el cian #0099D8. Ahora cada una dice lo suyo con la paleta: menudeo = dorado (distinción), mayoreo = verde nivel apagándose en carbón. Medido: tinta #15141A sobre #D9B26A 9,18:1 ✓ y sobre #F6EFE0 15,99:1 ✓; blanco sobre #0E6B5E 6,40:1 ✓ y sobre #15141A 18,31:1 ✓. El "em" del titular (26px, grande: mínimo 3:1) va en #8E2522 sobre el dorado: 4,32:1 ✓. */ .kb-split-card.b2c { background: linear-gradient(135deg, var(--kb-yellow) 0%, var(--kb-yellow-soft) 100%); color: var(--kb-ink); border: 0; } .kb-split-card.b2b { background: linear-gradient(135deg, var(--kb-b2b) 0%, var(--kb-ink) 100%); color: #fff; border: 0; } .kb-split-card.b2b h3 em { color: #D9B26A; font-style: normal; -webkit-text-stroke: 1px var(--kb-ink); } .kb-split-card.b2b p { color: rgba(255,255,255,0.92); } .kb-split-card h3 { font-family: var(--kb-font-display); font-size: 26px; font-weight: 800; margin: 0; line-height: 1.05; letter-spacing: -0.01em; } .kb-split-card.b2b h3 em { color: var(--kb-yellow); font-style: normal; } .kb-split-card.b2c h3 em { color: var(--kb-orange-deep); font-style: normal; } .kb-split-card p { font-size: 13.5px; line-height: 1.45; max-width: 38ch; margin: 0; opacity: 0.85; } .kb-split-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.12) 12px 13px); pointer-events: none; } /* Quick Order matrix */ .kb-qo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border: 1px solid var(--kb-line); border-radius: 10px; overflow: hidden; } .kb-qo-table th { text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kb-muted); border-bottom: 1px solid var(--kb-line); background: var(--kb-cream); } .kb-qo-table td { padding: 10px 14px; border-bottom: 1px solid var(--kb-line); vertical-align: middle; } .kb-qo-table tr:last-child td { border-bottom: 0; } .kb-qo-thumb { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .kb-qo-qty { width: 80px; } .kb-qo-qty input { width: 100%; height: 32px; text-align: center; border: 1px solid var(--kb-line-strong); border-radius: 4px; outline: none; font-weight: 600; } .kb-qo-qty input:focus { border-color: var(--kb-orange); } /* Mix & Match builder */ .kb-mix { display: grid; grid-template-columns: 1fr 320px; gap: 18px; } .kb-mix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .kb-mix-tile { background: #fff; border: 1px solid var(--kb-line); border-radius: 10px; padding: 10px; cursor: pointer; transition: all .12s; position: relative; } .kb-mix-tile:hover { border-color: var(--kb-orange); transform: translateY(-1px); } .kb-mix-tile.on { border-color: var(--kb-orange); border-width: 2px; padding: 9px; background: var(--kb-cream); } .kb-mix-tile .kb-tile-stripe-count { position: absolute; top: 6px; right: 6px; background: var(--kb-orange); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--kb-font-mono); } .kb-mix-tile h5 { font-size: 12px; font-weight: 600; margin: 6px 0 0; line-height: 1.25; } .kb-mix-tile .kb-tile-pp { font-family: var(--kb-font-display); font-weight: 700; font-size: 13px; } .kb-mix-box { background: #fff; border: 2px dashed var(--kb-line-strong); border-radius: 12px; padding: 18px; position: sticky; top: 110px; } .kb-mix-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0; } /* [LINEA-OUTLET · BLOQUE 13] El "+" del hueco vacío del armador de kits iba en gris piedra --kb-mute2 #8D8880 sobre el hueso #F4F1EB: 3,12:1. A 18px sin negrita el mínimo sigue siendo 4,5:1 (el de "texto grande" empieza en 18,66px, o en 14px si va en negrita), así que se queda corto por poco. Con el gris de texto --kb-muted #5C5A60 son 6,37:1 ✓ y el hueco además se ve como lo que es: una invitación a tocarlo. */ .kb-mix-slot { aspect-ratio: 1; border-radius: 6px; background: var(--kb-cream); border: 1px dashed var(--kb-line-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--kb-muted); position: relative; overflow: hidden; } .kb-mix-slot.filled { border-style: solid; border-color: var(--kb-orange); } .kb-mix-slot.filled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--kb-yellow), var(--kb-orange)); opacity: 0.85; } .kb-mix-slot.filled span { position: relative; z-index: 1; color: #fff; font-size: 9px; font-weight: 700; font-family: var(--kb-font-mono); padding: 0 4px; text-align: center; line-height: 1.1; } /* Responsive: barra inferior móvil del kit (total + CTA visibles al apilar) */ .kb-mix-mobilebar { display: none; } /* Barra de compra pegajosa de la FICHA (solo móvil): mismo patrón que kb-mix-mobilebar, fija sobre la barra de pestañas (.kb-bottomnav, 56px, z-index 80). */ .kb-pdp-stickybuy { display: none; } @media (max-width: 900px) { .kb-pdp-stickybuy { display: flex; position: fixed; left: 0; right: 0; bottom: 56px; z-index: 70; gap: 10px; align-items: center; background: rgba(255,255,255,0.97); border-top: 2px solid var(--kb-pink-deep, #A32C29); padding: 10px 14px calc(10px + env(safe-area-inset-bottom) * 0); box-shadow: 0 -4px 16px rgba(0,0,0,.12); } .kb-pdp-stickybuy .kb-btn { white-space: nowrap; } /* Que la barra no tape el final del contenido de la ficha. */ .kb-pdp { padding-bottom: 84px; } } @media (max-width: 1024px) { .kb-mix { grid-template-columns: 1fr 280px; } } @media (max-width: 860px) { .kb-mix { grid-template-columns: 1fr; padding-bottom: 140px; } .kb-mix-box { position: static; top: auto; } .kb-mix-grid { grid-template-columns: repeat(3, 1fr); } /* bottom: 56px = altura de .kb-bottomnav (la barra de pestañas móvil, z-index 80) */ .kb-mix-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 56px; z-index: 70; gap: 10px; align-items: center; justify-content: space-between; background: #fff; border-top: 2px solid var(--kb-orange); padding: 10px 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.12); } .kb-mix-mobilebar .kb-btn { white-space: nowrap; } } @media (max-width: 560px) { .kb-mix-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .kb-mix-tile h5 { font-size: 11.5px; } .kb-mix-tile button { width: 28px !important; height: 28px !important; } } /* ROI calc */ .kb-roi { background: linear-gradient(135deg, var(--kb-cream) 0%, #FFF 100%); border: 1px solid var(--kb-orange); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .kb-roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kb-roi-row { background: #fff; border-radius: 6px; padding: 8px 10px; } .kb-roi-row small { font-family: var(--kb-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kb-muted); } .kb-roi-row b { font-family: var(--kb-font-display); font-size: 16px; font-weight: 700; display: block; } .kb-roi-out { background: var(--kb-ink); color: #fff; border-radius: 6px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; } .kb-roi-out b { color: var(--kb-yellow); font-family: var(--kb-font-display); font-size: 22px; font-weight: 800; } /* Trust badge — fábrica */ .kb-factory-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--kb-ink); color: var(--kb-yellow); padding: 6px 10px; border-radius: 999px; font-family: var(--kb-font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } /* Sensory filter chips */ .kb-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .kb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer; background: #fff; border: 1px solid var(--kb-line-strong); font-size: 11.5px; font-weight: 500; } .kb-chip:hover { border-color: var(--kb-orange); } .kb-chip.on { background: var(--kb-ink); color: var(--kb-yellow); border-color: var(--kb-ink); } .kb-chip .swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } /* Old promo (kept compatible) */ .kb-promo { background: var(--kb-ink); color: var(--kb-yellow); font-family: var(--kb-font-mono); font-size: 11.5px; letter-spacing: 0.04em; padding: 7px 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-transform: uppercase; } .kb-promo .kb-promo-track { display: flex; gap: 28px; overflow: hidden; flex: 1; } .kb-promo-item { white-space: nowrap; opacity: 0.85; } .kb-promo-item b { color: var(--kb-orange); font-weight: 700; } .kb-promo .kb-lang { display: flex; gap: 10px; opacity: 0.7; } .kb-promo .kb-lang span { cursor: pointer; } .kb-promo .kb-lang .on { color: #fff; opacity: 1; } /* Header */ .kb-header { background: #fff; border-bottom: 1px solid var(--kb-line); position: sticky; top: 0; z-index: 50; } .kb-header-row { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 12px 22px; max-width: 1480px; margin: 0 auto; } .kb-logo { display: flex; align-items: center; gap: 10px; font-family: var(--kb-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--kb-ink); } .kb-logo-mark { width: 38px; height: 38px; border-radius: 9px; /* [LINEA-OUTLET · BLOQUE 13] La cinta traía el arcoíris del clon: cian #0099D8 y dos cafés (#2D1810, #8B4513) que no existen en esta marca. Ahora son las CINCO bandas de la paleta 1 —rojo, dorado, verde nivel, carbón, gris piedra— en el mismo reparto de anchos. Es decoración: no lleva texto encima. */ background: linear-gradient(90deg, #B8322F 0%, #B8322F 28%, #D9B26A 28%, #D9B26A 42%, #0E6B5E 42%, #0E6B5E 57%, #15141A 57%, #15141A 71%, #8A8A8E 71%); position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(15,14,11,0.12), inset 0 0 0 1px rgba(0,0,0,0.06); } .kb-logo-mark::before { content: "K"; position: absolute; inset: 4px; background: #fff; border-radius: 6px; font-family: "Arial Black", system-ui, sans-serif; font-weight: 900; font-size: 22px; color: #15141A; display: grid; place-items: center; -webkit-text-stroke: 1.5px #B8322F; line-height: 1; } .kb-logo-mark::after { content: "★"; position: absolute; top: 2px; right: 2px; font-size: 11px; color: #D9B26A; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .kb-logo small { font-family: var(--kb-font-mono); font-size: 10px; font-weight: 500; color: var(--kb-orange-deep); letter-spacing: 0.12em; display: block; line-height: 1; margin-top: 2px; } /* [LINEA-OUTLET · BLOQUE 22] EL BUSCADOR SE DIBUJA, NO SE RELLENA. Es la primera de las dos superficies que el dueño señaló. Medido, el campo no tenía ni color ni canto: el relleno #F4F1EB daba 1,13:1 contra el papel y el borde #E8E4DC daba 1,12:1 contra ese relleno — y en la vitrina, además, `border-color: transparent`. O sea que el campo se definía ENTERO por una mancha que casi no se distingue de la página. Por eso se leía como blanco sucio y no como un sitio donde escribir. Ahora: mismo papel de fondo y un borde de 1 px a 3,44:1, que es el mínimo de la casa para un objeto gráfico — y el campo ES el objeto gráfico. La esquina baja de píldora a 2 px: píldora más relleno claro es el gesto de una app de antojo, no el de una tienda. El tamaño de letra sube a 16 px y NO va dentro de una @media a propósito: Safari en iPhone amplía la página entera al enfocar un campo de menos de 16 px, y un teléfono en horizontal pasa de 768 px, así que un punto de ruptura dejaría el fallo vivo justo al girar el aparato. */ .kb-search { display: flex; align-items: center; background: var(--kb-paper); border: 1px solid var(--kb-line-strong); border-radius: 2px; padding: 0 6px 0 14px; height: 40px; transition: border-color .15s; } /* El foco va en tinta. Antes se pintaba con el rojo de la marca, que en esta casa ya significa acción y error: un mismo color no puede significar además "aquí está el cursor". */ .kb-search:focus-within { border-color: var(--kb-focus); background: var(--kb-paper); } .kb-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; height: 100%; } .kb-search input:focus-visible { outline: 2px solid var(--kb-focus); outline-offset: 2px; } /* Nadie lo declaraba: lo pintaba el gris de fábrica de cada navegador, distinto en Chrome, en Safari y en Firefox, y por lo tanto sin medir. 6,80:1 sobre el papel. */ .kb-search input::placeholder { color: var(--kb-muted); opacity: 1; } .kb-search .kb-search-cat { border: none; background: transparent; font-size: 12px; color: var(--kb-muted); padding: 0 12px; border-right: 1px solid var(--kb-line); height: 22px; outline: none; } .kb-search button.kb-search-go { height: 32px; padding: 0 18px; border: none; border-radius: 999px; background: var(--kb-ink); color: var(--kb-yellow); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; } .kb-search button.kb-search-go:hover { background: var(--kb-orange); color: #fff; } .kb-header-actions { display: flex; align-items: center; gap: 4px; } .kb-iconbtn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--kb-charcoal); font-weight: 500; position: relative; } .kb-iconbtn:hover { background: var(--kb-cream); border-color: var(--kb-line); } .kb-iconbtn .kb-icon { font-size: 16px; line-height: 1; } .kb-iconbtn .kb-badge { position: absolute; top: 2px; right: 4px; background: var(--kb-orange); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; min-width: 16px; text-align: center; font-family: var(--kb-font-mono); } .kb-iconbtn small { display: block; font-size: 10px; color: var(--kb-muted); font-weight: 500; line-height: 1; margin-top: 2px; } .kb-iconbtn .lbl-stack { text-align: left; line-height: 1.15; } .kb-iconbtn .lbl-stack b { display: block; font-weight: 600; } /* Header variants */ [data-header="split"] .kb-header-row { grid-template-columns: auto 1fr auto; } [data-header="centered"] .kb-header-row { grid-template-columns: 1fr auto 1fr; } [data-header="centered"] .kb-search { max-width: 560px; margin: 0 auto; } [data-header="centered"] .kb-logo-side { display: flex; justify-content: flex-start; } [data-header="minimal"] .kb-promo { display: none; } [data-header="minimal"] .kb-nav { display: none; } [data-header="minimal"] .kb-header-row { padding: 10px 22px; } /* Primary nav */ .kb-nav { background: #fff; border-bottom: 1px solid var(--kb-line); } .kb-nav-row { display: flex; align-items: stretch; gap: 0; padding: 0 22px; max-width: 1480px; margin: 0 auto; } .kb-nav-item { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; font-family: inherit; text-align: left; padding: 10px 14px; font-size: 12.5px; font-weight: 500; color: var(--kb-charcoal); border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .kb-nav-item:hover { color: var(--kb-orange-deep); } .kb-nav-item.on { color: var(--kb-orange-deep); border-bottom-color: var(--kb-orange); } .kb-nav-item .kb-pill { font-family: var(--kb-font-mono); font-size: 9.5px; font-weight: 700; background: var(--kb-yellow-soft); color: var(--kb-charcoal); padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; } .kb-nav-item .kb-pill.b2b { background: var(--kb-b2b-soft); color: var(--kb-b2b); } .kb-nav-spacer { flex: 1; } .kb-nav-meta { display: flex; align-items: center; gap: 14px; font-family: var(--kb-font-mono); font-size: 11px; color: var(--kb-muted); } .kb-nav-meta b { color: var(--kb-charcoal); } /* Layout */ .kb-main { max-width: 1480px; width: 100%; margin: 0 auto; padding: 22px; flex: 1; } /* Buttons */ .kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .12s; white-space: nowrap; } /* CTA en #A32C29 (rosa de marca): contraste 5.87:1 con blanco → cumple WCAG AA (el #B8322F anterior daba 4.35:1, por debajo del mínimo 4.5:1). */ .kb-btn-primary { background: #A32C29; color: #fff; } .kb-btn-primary:hover { background: #8E2522; } /* Foco de teclado visible (solo navegación por teclado, no afecta al mouse). Antes había varias reglas outline:none sin reemplazo accesible. */ :focus-visible { outline: 2px solid #A32C29; outline-offset: 2px; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #A32C29; outline-offset: 2px; } .kb-btn-dark { background: var(--kb-ink); color: var(--kb-yellow); } .kb-btn-dark:hover { background: #000; } .kb-btn-ghost { background: #fff; border-color: var(--kb-line-strong); color: var(--kb-ink); } .kb-btn-ghost:hover { border-color: var(--kb-orange); color: var(--kb-orange-deep); } /* [LINEA-OUTLET · BLOQUE 13] Un enlace es ACCIÓN, y la acción de esta marca es el rojo outlet — no el azul de "información" que traía (--kb-info). Con --kb-orange-text: 7,12:1 sobre blanco ✓ (el #1F5BA8 anterior daba 6,73:1, pero era azul). --kb-info se queda para lo que de verdad es informativo. */ .kb-btn-link { background: transparent; color: var(--kb-orange-text); border-color: transparent; padding: 0 6px; height: auto; } .kb-btn-link:hover { text-decoration: underline; } .kb-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; } .kb-btn-lg { height: 46px; padding: 0 22px; font-size: 14px; } .kb-btn-block { width: 100%; } .kb-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Cards */ .kb-card { background: #fff; border: 1px solid var(--kb-line); border-radius: var(--kb-radius-lg); padding: var(--kb-card-pad); } .kb-card-flat { background: var(--kb-cream); border-color: var(--kb-line); } .kb-card-section { padding: 0; overflow: hidden; } .kb-card-section > .head { padding: 12px 16px; border-bottom: 1px solid var(--kb-line); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: space-between; } .kb-card-section > .body { padding: 16px; } /* Tags / chips / badges */ .kb-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--kb-font-mono); font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 3px; letter-spacing: 0.03em; background: var(--kb-cream); color: var(--kb-charcoal); border: 1px solid var(--kb-line); } .kb-tag.orange { background: var(--kb-yellow-soft); color: var(--kb-orange-deep); border-color: var(--kb-yellow); } /* [LINEA-OUTLET · BLOQUE 13] El dorado no contrasta: el texto sobre él va en el bronce de la paleta, #8A5300 (5,53:1 sobre #F6EFE0 ✓). El #6B5220 que había pasaba, pero era un café suelto — un dorado oscuro más de los seis que tenía la hoja. */ .kb-tag.yellow { background: var(--kb-yellow-soft); color: #8A5300; border-color: var(--kb-yellow); } .kb-tag.pink { background: var(--kb-pink-soft); color: var(--kb-pink-deep); border-color: var(--kb-pink); } /* [LINEA-OUTLET · BLOQUE 13] El único sitio que pinta este tag es "Ejecutivo debe contactar" (admin-crud): no es información, es un AVISO con trabajo pendiente. Pasa al ámbar de estado de la casa: #8A5300 sobre #FFF7E6 → 5,94:1 ✓ (el par azul anterior, #1F5BA8 sobre #E4ECF7, decía "dato" y no "atiéndeme"). */ .kb-tag.blue { background: var(--kb-cola-ambar-bg); color: var(--kb-cola-ambar); border-color: var(--kb-cola-ambar-borde); } .kb-tag.dark { background: var(--kb-ink); color: var(--kb-yellow); border-color: var(--kb-ink); } /* [LINEA-OUTLET · BLOQUE 13] Tres arreglos en tres renglones: · b2b llevaba un BORDE lila (#C9BFE9), herencia del morado del clon, alrededor de un chip que ya era verde por dentro. El borde pasa al verde nivel. · green era el cuarto verde casi igual de la hoja (#14613A sobre #DCEFE2, borde #B7DCC2). Ahora es el ÚNICO verde de la casa: #0E6B5E sobre #E3F1EE → 5,51:1 ✓ (el par anterior daba 6,24:1 pero con otro verde). · red es un ESTADO DE ERROR, así que usa los tokens de estado de la paleta en vez de su rojo suelto: #B3261E sobre #FDECEA → 5,72:1 ✓. */ .kb-tag.b2b { background: var(--kb-b2b-soft); color: var(--kb-b2b); border-color: var(--kb-b2b); } .kb-tag.green { background: var(--kb-b2b-soft); color: var(--kb-b2b); border-color: var(--kb-b2b); } .kb-tag.red { background: var(--kb-cola-rojo-bg); color: var(--kb-cola-rojo); border-color: var(--kb-cola-rojo-borde); } /* Striped product placeholder */ .kb-prod-img { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--kb-cream); border: 1px solid var(--kb-line); } .kb-prod-img svg { width: 100%; height: 100%; display: block; } .kb-prod-img .kb-prod-label { position: absolute; left: 8px; bottom: 8px; right: 8px; font-family: var(--kb-font-mono); font-size: 10px; color: var(--kb-charcoal); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; background: rgba(255,255,255,0.85); padding: 4px 6px; border-radius: 3px; backdrop-filter: blur(2px); } /* Product card */ .kb-pcard { background: #fff; border: 1px solid var(--kb-line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; position: relative; } .kb-pcard:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow); border-color: var(--kb-line-strong); } /* UX-02: enlace superpuesto ("stretched link") — toda la tarjeta navega, pero los controles del pie y el aviso B2B viven ENCIMA para no anidar interactivos. */ /* UX-02/UX-14: enlace superpuesto ("stretched link"). Selector NO scopeado a .kb-pcard para reutilizarlo también en las mini-tarjetas del carrito. La clase solo se usa en overlays, así que position:absolute/inset:0 es inocuo fuera. */ .kb-pcard-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .kb-pcard .kb-pcard-foot { position: relative; z-index: 2; } .kb-pcard .kb-pcard-tags { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 4px; } /* CONV-1BC/1b · ♡ como overlay circular sobre la imagen (antes compartía la fila del pie). z-index 3 y NO 2: tiene que ganarle al stretched link .kb-pcard-link (z-index 1) —si no, el overlay que cubre la tarjeta se come el click y el control es inalcanzable con el mouse— y también al listón de tema (.kb-pcard::after, z-index 2), que si no lo taparía en la misma esquina. */ .kb-pcard .kb-pcard-fav { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; padding: 0; min-height: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--kb-line-strong); background: rgba(255,255,255,0.92); color: var(--kb-muted); cursor: pointer; line-height: 0; box-shadow: 0 1px 3px rgba(15,14,11,0.12); } /* El círculo se ve de 28px (lo que pide el handoff) pero el área de toque es de 44px: el mínimo táctil del propio handoff, y sin él las esquinas de la caja caían en el stretched link — un roce al intentar guardar en favoritos abría la ficha. El ::before no pinta nada, solo agranda el blanco de golpeo. */ .kb-pcard .kb-pcard-fav::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } .kb-pcard .kb-pcard-fav:hover { color: var(--kb-pink-deep); border-color: var(--kb-pink-deep); } .kb-pcard .kb-pcard-fav svg { width: 15px; height: 15px; } .kb-pcard .kb-pcard-meta { font-family: var(--kb-font-mono); font-size: 10px; color: var(--kb-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* CONV-1BC/1b · el nombre es información, no acción: tinta en vez del rosa de marca (que aquí competía con el CTA del pie). */ .kb-pcard h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--kb-ink); line-height: 1.3; min-height: 2.6em; } .kb-pcard .kb-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .kb-pcard .price { font-family: var(--kb-font-display); font-weight: 700; font-size: 20px; color: var(--kb-ink); letter-spacing: -0.01em; } .kb-pcard .price-old { color: var(--kb-mute2); text-decoration: line-through; font-size: 12px; } /* [LINEA-OUTLET · BLOQUE 16] La línea de reputación de la tarjeta. Venía con sus colores y su tamaño escritos a mano dentro del JSX; ahora manda la clase, como en el resto de la tarjeta. Solo se pinta si hay reseñas o ventas de verdad. Contrastes sobre el blanco de .kb-pcard: · estrella --kb-orange #B8322F → 5,94:1 ✓ (y es un objeto gráfico: le basta 3:1) · nota --kb-charcoal → 12,6:1 ✓ · conteo y ventas --kb-muted #5C5A60 → 7,00:1 ✓ */ .kb-pcard-rate { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--kb-orange); } .kb-pcard-rate b { color: var(--kb-charcoal); font-weight: 600; } .kb-pcard-rate span { color: var(--kb-muted); } .kb-pcard .price-save { color: var(--kb-success); font-size: 11.5px; font-weight: 600; } /* [LINEA-OUTLET · BLOQUE 16] Aquí vivía .kb-b2b-hook: el bloque-botón amarillo de 44px "Mayoreo $X −N% · Regístrate GRATIS →" de la tarjeta. Se fue porque el descuento por volumen dejó de necesitar cuenta (backend/orders.js se lo aplica a cualquiera) y porque el precio que enseñaba salía de los tiers del PRODUCTO, que son el precio de una cuenta y no el que iba a pagar quien miraba la tarjeta. En su lugar, una línea con el peldaño real y su condición — el mismo dibujo que usa la vitrina en .lo-tile-pl: el precio en la grotesca, el −% en la pastilla verde de NIVEL ALCANZADO y la condición debajo. Contrastes sobre el blanco de .kb-pcard: · rótulo y condición --kb-muted #5C5A60 → 7,00:1 ✓ · precio --kb-ink #15141A → 18,31:1 ✓ · −% --kb-b2b #0E6B5E sobre --kb-b2b-soft #E3F1EE → 5,40:1 ✓ Se va con el bloque su último verde literal (#0E6B5E escrito a mano porque sobre el amarillo del gancho el token no llegaba a 4,5:1): sin amarillo detrás, el token de la paleta vale y no hace falta la excepción. */ .kb-pcard-may { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 11.5px; line-height: 1.35; color: var(--kb-muted); } /* nowrap SOLO en la cifra: en el catálogo de 2 columnas, "Mayoreo $4,900" entero no cabe en un renglón y antes se desbordaba. Así "Mayoreo" puede bajar de línea y la cantidad nunca se parte por la mitad. */ .kb-pcard-may b { font-family: var(--kb-font-display); font-size: 14px; font-weight: 800; color: var(--kb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .kb-pcard-may i { font-style: normal; padding: 1px 6px; border-radius: 5px; background: var(--kb-b2b-soft); color: var(--kb-b2b); font-size: 11px; font-weight: 700; } .kb-pcard-may span { flex-basis: 100%; font-size: 11px; color: var(--kb-muted); } /* CONV-1BC/1b · el pie pasa de fila (botón + ♡) a COLUMNA: el control de compra ocupa el ancho completo a 44px en sus tres estados (paquete, stepper, agregar). */ .kb-pcard .kb-pcard-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; align-items: stretch; } .kb-pcard .kb-pcard-foot .kb-btn { width: 100%; height: 44px; font-size: 13px; } .kb-pcard .kb-pcard-foot .kb-pcard-stepper { width: 100%; height: 44px; min-height: 44px; } .kb-locked-price { background: var(--kb-b2b-soft); color: var(--kb-b2b); padding: 6px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; /* [LINEA-OUTLET · BLOQUE 13] El borde era lila (#B5A8E0): morado del clon rodeando un bloque que ya habla de NIVEL por dentro (fondo y texto verdes). Con --kb-b2b el borde dice lo mismo que el relleno. */ border: 1px dashed var(--kb-b2b); } /* Inputs */ .kb-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--kb-line-strong); border-radius: 6px; background: #fff; font-size: 13.5px; outline: none; transition: border-color .12s, box-shadow .12s; } /* [LINEA-OUTLET · BLOQUE 13] El halo del foco seguía en el rgba del magenta viejo (#E91E63). Pasa al rojo outlet (#B8322F = rgb 184,50,47), que es el mismo color del borde al que acompaña. */ .kb-input:focus { border-color: var(--kb-orange); box-shadow: 0 0 0 3px rgba(184,50,47,0.15); } .kb-input.error { border-color: var(--kb-danger); } .kb-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--kb-charcoal); margin-bottom: 6px; letter-spacing: 0.01em; } .kb-help { font-size: 11px; color: var(--kb-muted); margin-top: 4px; } .kb-error { font-size: 11px; color: var(--kb-danger); margin-top: 4px; } textarea.kb-input { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; } select.kb-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--kb-charcoal) 50%), linear-gradient(135deg, var(--kb-charcoal) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; } /* Toast */ .kb-toast-stack { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; } .kb-toast { background: var(--kb-charcoal); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; box-shadow: var(--kb-shadow); display: flex; align-items: center; gap: 10px; pointer-events: auto; animation: kbToast .25s ease both; } .kb-toast.success { background: #0E6B5E; } .kb-toast.warn { background: var(--kb-orange-deep); color: #fff; } @keyframes kbToast { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} } /* Utility */ .kb-row { display: flex; align-items: center; gap: 12px; } .kb-stack { display: flex; flex-direction: column; gap: 12px; } .kb-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kb-grid { display: grid; gap: var(--kb-gap); } .kb-mono { font-family: var(--kb-font-mono); } .kb-muted { color: var(--kb-muted); } .kb-divider { height: 1px; background: var(--kb-line); border: 0; margin: 4px 0; } .kb-h1 { font-family: var(--kb-font-display); font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .kb-h2 { font-family: var(--kb-font-display); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .kb-h3 { font-family: var(--kb-font-display); font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; } .kb-eyebrow { font-family: var(--kb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kb-orange-deep); } /* Hero */ .kb-hero { /* [LINEA-OUTLET · BLOQUE 13] La cinta traía el arcoíris del clon: cian #0099D8 y dos cafés (#2D1810, #8B4513) que no existen en esta marca. Ahora son las CINCO bandas de la paleta 1 —rojo, dorado, verde nivel, carbón, gris piedra— en el mismo reparto de anchos. Es decoración: no lleva texto encima. */ background: linear-gradient(90deg, #B8322F 0%, #B8322F 28%, #D9B26A 28%, #D9B26A 42%, #0E6B5E 42%, #0E6B5E 57%, #15141A 57%, #15141A 71%, #8A8A8E 71%); color: #fff; padding: 6px; border-radius: 18px; overflow: hidden; position: relative; min-height: 380px; } .kb-hero .kb-hero-content, .kb-hero .kb-hero-art { background: #fff; } .kb-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px; } .kb-hero .kb-hero-content { padding: 36px; display: flex; flex-direction: column; gap: 18px; justify-content: center; position: relative; z-index: 1; border-radius: 14px 0 0 14px; } .kb-hero h1 { color: var(--kb-ink); font-family: var(--kb-font-display); /* [BLOQUE 22] era "Arial Black" con la grotesca vieja de respaldo: el único font-family de la hoja que no pasaba por una variable */ font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -0.02em; -webkit-text-stroke: 2px #FFFFFF; text-shadow: 3px 3px 0 var(--kb-ink); } .kb-hero h1 em { color: var(--kb-pink-deep); font-style: normal; -webkit-text-stroke: 2px #FFFFFF; } .kb-hero .tagline { font-family: "Arial Black", sans-serif; font-weight: 900; font-size: 13px; color: #D9B26A; -webkit-text-stroke: 1px #B8322F; letter-spacing: 0.05em; text-transform: uppercase; } .kb-hero p { color: var(--kb-muted); font-size: 15px; max-width: 46ch; line-height: 1.5; margin: 0; } /* ═══ HERO · variante "Pulido" (V1) en sección izquierda ═══ */ .kb-hero .kb-hero-pulido { padding: 0; gap: 0; overflow: hidden; border: 6px solid var(--kb-red); border-radius: 14px 0 0 14px; background: #fff; } .kb-hero-pulido .kb-hero-stripe { display: flex; height: 8px; flex: 0 0 auto; } .kb-hero-pulido .kb-hero-stripe i { flex: 1; } .kb-hero-pulido .kb-hero-stripe i:nth-child(1) { background: var(--kb-pink-deep); } .kb-hero-pulido .kb-hero-stripe i:nth-child(2) { background: var(--kb-yellow); } .kb-hero-pulido .kb-hero-stripe i:nth-child(3) { background: var(--kb-green); } .kb-hero-pulido .kb-hero-inner { padding: clamp(26px, 4vw, 46px); display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: center; } .kb-hero-pulido .kb-hero-eyebrow { font-family: var(--kb-font-display); font-weight: 800; color: var(--kb-pink-deep); letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.6em; } .kb-hero-pulido .kb-hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kb-green); flex: 0 0 auto; } .kb-hero-pulido h1 { font-family: var(--kb-font-display); font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 0.94; letter-spacing: -0.01em; color: var(--kb-ink); text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: none; margin: 0; } .kb-hero-pulido h1 em { font-style: normal; color: var(--kb-pink-deep); position: relative; -webkit-text-stroke: 0; } .kb-hero-pulido h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.08em; background: var(--kb-yellow); border-radius: 2px; } .kb-hero-pulido .kb-hero-sub { color: var(--kb-muted); font-size: 16px; line-height: 1.5; font-weight: 500; max-width: 32em; margin: 0; } .kb-hero-pulido .kb-hero-trust { display: flex; align-items: stretch; flex-wrap: wrap; border-top: 1px solid var(--kb-line); padding-top: 16px; margin-top: 2px; } .kb-hero-pulido .kb-hero-trust .stat { display: flex; flex-direction: column; gap: 3px; padding-right: clamp(18px, 3vw, 32px); } .kb-hero-pulido .kb-hero-trust .stat + .stat { border-left: 1px solid var(--kb-line); padding-left: clamp(18px, 3vw, 32px); } .kb-hero-pulido .kb-hero-trust .stat b { font-family: var(--kb-font-display); font-size: 21px; color: var(--kb-ink); line-height: 1; } .kb-hero-pulido .kb-hero-trust .stat b .star { font-size: 0.85em; } .kb-hero-pulido .kb-hero-trust .stat span { font-size: 12px; color: var(--kb-muted); font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 560px) { .kb-hero-pulido .kb-hero-trust { flex-direction: column; gap: 12px; } .kb-hero-pulido .kb-hero-trust .stat { padding-right: 0; } .kb-hero-pulido .kb-hero-trust .stat + .stat { border-left: none; padding-left: 0; border-top: 1px solid var(--kb-line); padding-top: 12px; } } /* ═══ HERO Distribuidores · responsive (apilar columnas en móvil) ═══ */ @media (max-width: 860px) { .kb-dist-hero { grid-template-columns: 1fr !important; min-height: auto !important; } .kb-dist-hero-left { padding: 34px 22px 28px !important; } .kb-dist-hero-right { /* [LINEA-OUTLET · BLOQUE 13] #2a2a2a era un gris frío suelto sobre un fondo oscuro que no es suyo; una línea blanca al 14% se apoya en el fondo real, sea cual sea. */ border-left: none !important; border-top: 1px solid rgba(255,255,255,0.14); padding: 30px 18px 36px !important; } } @media (max-width: 480px) { .kb-dist-hero-left { padding: 28px 18px 24px !important; } .kb-dist-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 0 !important; } .kb-dist-kpi { border-left: none !important; padding-left: 0 !important; } .kb-dist-kpi:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.14) !important; padding-left: 16px !important; } } .kb-hero .kb-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; } .kb-hero .kb-hero-art { position: relative; /* [LINEA-OUTLET · BLOQUE 13] El degradado cerraba en el azul suave heredado; ahora cierra en hueso y el arte queda entero en la gama cálida de la marca. */ background: linear-gradient(135deg, var(--kb-yellow-soft) 0%, var(--kb-pink-soft) 50%, var(--kb-cream) 100%); border-radius: 0 14px 14px 0; overflow: hidden; } .kb-hero .kb-hero-art::after { content: ""; position: absolute; inset: 0; /* [LINEA-OUTLET · BLOQUE 13] El rayado iba en el rgba del ámbar viejo #C9A227; ahora en el dorado de la paleta (#D9B26A = rgb 217,178,106). */ background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(217,178,106,0.10) 14px 15px); } .kb-hero .kb-hero-stat { position: absolute; bottom: 20px; right: 20px; background: var(--kb-ink); color: var(--kb-yellow); padding: 12px 16px; border-radius: 8px; font-family: var(--kb-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .kb-hero .kb-hero-stat b { display: block; font-family: var(--kb-font-display); font-size: 24px; color: #fff; } /* Category strip */ .kb-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 22px; } .kb-cat { background: #fff; border: 1px solid var(--kb-line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .12s, transform .12s; } .kb-cat:hover { border-color: var(--kb-orange); transform: translateY(-2px); } /* UX-12: la tarjeta de categoría es un — neutraliza subrayado/color de link (los textos internos ya fijan su color). */ a.kb-cat { text-decoration: none; color: inherit; } .kb-cat .kb-cat-thumb { width: 100%; aspect-ratio: 1.2 / 1; border-radius: 6px; background: var(--kb-cream); position: relative; overflow: hidden; } .kb-cat .kb-cat-thumb svg { width: 100%; height: 100%; } .kb-cat .kb-cat-name { font-size: 12.5px; font-weight: 600; color: var(--kb-charcoal); } .kb-cat .kb-cat-count { font-family: var(--kb-font-mono); font-size: 10.5px; color: var(--kb-muted); } /* Section header */ .kb-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 30px 0 14px; gap: 16px; } .kb-section-head h2 { font-family: var(--kb-font-display); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .kb-section-head .kb-section-meta { font-family: var(--kb-font-mono); font-size: 11px; color: var(--kb-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* Footer */ .kb-footer { background: var(--kb-ink); color: rgba(255,255,255,0.7); margin-top: 50px; padding: 40px 22px 22px; font-size: 12.5px; } .kb-footer-grid { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .kb-footer h5 { color: #fff; font-family: var(--kb-font-display); font-size: 13px; margin: 0 0 12px; letter-spacing: 0.02em; } .kb-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .kb-footer li { cursor: pointer; } .kb-footer li:hover { color: var(--kb-yellow); } /* [LINEA-OUTLET · BLOQUE 14] La franja de abajo del pie (aviso de derechos y la línea de la empresa) iba en blanco al 40 % sobre el carbón --kb-ink: compuesto da #737276, que contra #15141A son 3,83:1 — por debajo del 4,5:1 que pide un texto de 10,5 px, y encima por debajo del piso de 11 px de la casa. Es el ÚNICO par del pie que no llegaba: el cuerpo (blanco al 70 % → 9,34:1), los títulos (blanco → 18,31:1), el hover dorado (9,18:1), los enlaces legales (7,01:1) y el "Síguenos:" (5,18:1) pasan de sobra. Al 62 % el compuesto es #a6a6a8 → 7,53:1 ✓, y sigue leyéndose como letra chica: el pie no cambia de aspecto, cambia que se pueda leer. */ .kb-footer-bot { max-width: 1480px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; gap: 12px; font-family: var(--kb-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.62); } /* Catalog */ .kb-catalog { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; } .kb-filters { background: #fff; border: 1px solid var(--kb-line); border-radius: 10px; position: sticky; top: 110px; } .kb-filter-grp { padding: 14px 16px; border-bottom: 1px solid var(--kb-line); } .kb-filter-grp:last-child { border-bottom: 0; } .kb-filter-grp h6 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kb-charcoal); } .kb-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 12.5px; } .kb-filter-row input { accent-color: var(--kb-orange); } .kb-filter-row .count, .kb-chip .count { color: var(--kb-muted); font-family: var(--kb-font-mono); font-size: 10.5px; } .kb-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fff; border: 1px solid var(--kb-line); border-radius: 8px; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .kb-catalog-toolbar .kb-catalog-count { font-size: 12.5px; color: var(--kb-muted); } .kb-catalog-toolbar .kb-catalog-count b { color: var(--kb-ink); } .kb-catalog-toolbar .kb-toolbar-right { display: flex; gap: 10px; align-items: center; } .kb-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--kb-card-min), 1fr)); gap: 14px; } /* PDP */ /* [B1] minmax(0, …) y no `1.05fr 0.95fr` a secas: `1fr` es `minmax(AUTO, 1fr)`, y ese `auto` significa "mínimo = min-content del contenido", así que CUALQUIER hijo con min-width propio (el carril del camino de volumen era el caso) hacía crecer la columna, y con html/body/.kb-main en overflow-x: clip el sobrante no sacaba barra: se cortaba. Con minmax(0, …) la columna nunca crece por su contenido; quien tenga que desplazarse lo hace en su propio contenedor. */ .kb-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 30px; } .kb-pdp-gallery { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: start; } .kb-pdp-thumbs { display: flex; flex-direction: column; gap: 8px; } /* UX-02: thumbs y dots ahora son