/* ========================================================================== KOKURA — base Tokens, tipografía, reset y elementos transversales. Las secciones y componentes viven en kk-secciones.css. ========================================================================== */ /* -------------------------------------------------------------------------- TIPOGRAFÍA — local, nunca desde un CDN (CLAUDE.md §2.3) Arimo es VARIABLE: un solo archivo cubre 400–700, por eso hay dos bloques (latin y latin-ext) y no seis. Ver PROCEDENCIA-LIBS.md. -------------------------------------------------------------------------- */ @font-face { font-family: 'Arimo'; src: url('../libs/fuentes/arimo-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Arimo'; src: url('../libs/fuentes/arimo-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- TOKENS LA DECISIÓN QUE ORDENA TODO EL SITIO: es CLARO, con producto sobre blanco. Se llegó ahí por tres caminos que coinciden, no por gusto: 1. Los dos fondos que entregó el cliente (`fondo1.png`, `fondo3.png`) son degradados que TERMINAN casi en blanco. Y entregó un logo NEGRO, que solo tiene sentido sobre fondo claro. 2. El mercado: en tiendas de ropa, 52% usa fondo casi blanco y 28% claro —80% entre las dos— contra 4% que va oscura. La ficha de producto con área de imagen clara es lo que hace resaltar la ropa. 3. La versión anterior de este sitio era oscura y usaba CINCO tratamientos de fondo distintos, uno por sección. El cliente lo rechazó, con razón: eso no es un sistema, es un muestrario. Se había tomado la landing vieja de "muy pronto" como referencia, y esa landing tenía la paleta INVENTADA — o sea que no era evidencia de nada. EL SITIO TIENE TRES ZONAS. No más: a) HERO el degradado rosa del cliente, entero. El único momento de color grande, que es donde el difuminado se pidió. b) CUERPO blanco. Tienda, cómo pedir, preguntas. El producto manda. c) CIERRE un bloque negro continuo: la marca, el CTA y el pie. El rosa NO vuelve a ser fondo de sección: pasa a ser ACENTO — botones, etiquetas, subrayados, hover. Un color de marca rinde más apareciendo poco. -------------------------------------------------------------------------- */ :root { /* Paleta del brandboard «Distorted Evolution», textual. */ --kk-negro: #070606; --kk-rosa: #ee8098; --kk-rosa-palido: #fcdee9; --kk-ciruela: #553e64; --kk-lila: #e5d8ed; --kk-gris: #efefef; --kk-blanco: #ffffff; /* Superficies. El blanco del cuerpo es blanco puro; el gris de la paleta hace de fondo de las fotos de producto, que es donde el mercado lo pone: un gris muy claro detrás del producto lo recorta mejor que el blanco. */ --kk-fondo: #ffffff; --kk-fondo-foto: #efefef; --kk-linea: #e6e2e6; --kk-linea-fuerte: #cfc8d0; /* Borde de un control INTERACTIVO cuyo contorno es lo que lo identifica como control. WCAG 1.4.11 pide 3:1 para eso, y --kk-linea-fuerte da 1.64 sobre blanco — sirve para separar bloques, no para dibujar un control. #8d858f sobre blanco 3.57 #8d858f sobre #efefef 3.10 Medido el 2026-08-10, no elegido a ojo. Los controles DESHABILITADOS quedan exentos por la propia norma, y por eso el chip agotado usa el borde suave: ahí el gris apagado es la señal, no un defecto. */ --kk-linea-control: #8d858f; /* Texto sobre claro. El gris de apoyo se midió: 7.06 sobre blanco. */ --kk-texto: #070606; --kk-texto-apoyo: #5e5760; /* Texto sobre el bloque negro. */ --kk-texto-inv: #ffffff; --kk-texto-inv-apoyo: #b9b1bb; /* EL FONDO DEL HERO — el morado del cliente (`fondo1.png`), que eligió el 2026-08-06 sobre el rosa. Muestreado píxel a píxel de la columna central del PNG, igual que el rosa que reemplaza. POR QUÉ ESTE MORADO NO LLEGA HASTA EL LILA, Y EL ROSA SÍ LLEGABA HASTA EL BLANCO. No es capricho: es la diferencia medida entre los dos archivos. El rosa aguantaba texto NEGRO en todo su recorrido (peor punto 7.94, desde el primer píxel). El morado no aguanta texto de NINGÚN color de punta a punta: negro sobre #553e64 (su arranque) ....... 2.18 FALLA negro recién llega a 4.5 en ............. #837090 (32% del recorrido) blanco sobre #553e64 .................... 9.29 PASA blanco deja de leerse en ................ #836f90 (32% del recorrido) O sea que el morado se lee con BLANCO en su mitad oscura y con NEGRO en su mitad clara, y los dos se cruzan justo en el medio. No hay un color de texto que sirva para el archivo entero. Se eligió su mitad OSCURA con texto blanco, porque es donde el morado se ve morado: acotarlo a la mitad clara daba un lila lavado, sin carácter. El cliente ya había entregado el logo en blanco, que es exactamente para esto. El rango llega hasta #766184 y no más: ahí el blanco todavía da 5.5, con margen para el borde fino de los botones, que es lo primero que se pierde cuando el fondo se aclara. */ --kk-grad-hero: linear-gradient(180deg, #553e64 0%, #62486f 55%, #766184 100%); /* El fundido al blanco del cuerpo NO ocurre debajo del contenido: ocurre en una franja propia, después. Ver `.kk-hero__fundido`. */ --kk-grad-hero-fin: linear-gradient(180deg, #766184 0%, #a394ae 45%, #ffffff 100%); /* Tipografía */ --kk-fuente: 'Arimo', Arial, 'Helvetica Neue', Helvetica, sans-serif; /* Escala de espaciado — múltiplos de 4px */ --kk-e1: 4px; --kk-e2: 8px; --kk-e3: 12px; --kk-e4: 16px; --kk-e5: 24px; --kk-e6: 32px; --kk-e7: 48px; --kk-e8: 64px; --kk-e9: 96px; --kk-e10: 128px; --kk-radio: 4px; /* casi recto: el streetwear no es redondeado */ --kk-radio-pill: 99px; --kk-ancho: 1280px; --kk-ancho-angosto: 720px; --kk-cabecera-alto: 72px; } /* -------------------------------------------------------------------------- RESET mínimo -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] tiene que GANAR, y por eso lleva !important. El atributo se aplica desde la hoja del navegador con un simple `[hidden]{display:none}`, y cualquier regla de autor que declare `display` sobre el mismo elemento lo anula. Pasó: `.kk-carrito{display:flex}` dejaba el panel del carrito visible de forma permanente, con el atributo puesto. Y las pruebas no lo veían porque preguntaban `panel.hidden`, que devolvía true — el atributo SÍ estaba. Medí el display computado, no el atributo. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kk-cabecera-alto) + var(--kk-e4)); } body { margin: 0; background: var(--kk-fondo); color: var(--kk-texto); font-family: var(--kk-fuente); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 700; } p { margin: 0 0 var(--kk-e4); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* Foco visible en TODO lo interactivo. Sobre claro el rosa no se lee como texto, pero como ANILLO de foco sí funciona: es un elemento de interfaz (mínimo 3.0) y va acompañado de un halo negro que lo separa del fondo. */ :focus-visible { outline: 3px solid var(--kk-negro); outline-offset: 2px; } /* -------------------------------------------------------------------------- UTILIDADES -------------------------------------------------------------------------- */ /* EL CONTENEDOR SOLO TOCA LOS COSTADOS. `padding-inline`, nunca el atajo `padding: 0 X` — y esto no es estilo, arregla dos defectos reales (2026-09-08, el segundo reportado en celular). El atajo declara TAMBIEN el eje vertical, poniendolo en 0. Como esta clase se combina con otras en el mismo elemento —`kk-contenedor kk-marca__caja`, `kk-contenedor kk-pie__legal`— y todas tienen la misma especificidad (0,1,0), gana la que este declarada mas abajo. Resultado medido a 375px antes de este cambio: .kk-marca__caja padding arriba/abajo 0px (declaraba 96 y 48) .kk-pie__legal padding arriba 0px (declaraba 16) O sea que «Quienes somos» quedaba a 14px del borde del bloque negro. Es el incidente numero 2 de §3.3 otra vez: una regla posterior con la misma especificidad anulando a la anterior, sin que nada falle. */ .kk-contenedor { width: 100%; max-width: var(--kk-ancho); margin: 0 auto; padding-inline: var(--kk-e6); } .kk-contenedor--angosto { max-width: var(--kk-ancho-angosto); } .kk-saltar { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--kk-negro); color: var(--kk-blanco); padding: var(--kk-e3) var(--kk-e5); font-weight: 700; } .kk-saltar:focus { left: 0; } /* Texto que NO se ve pero SÍ se lee en voz alta. Lo usa el chip de talla para llevar «— agotada» dentro de su nombre accesible, donde visualmente sólo cabe la letra. OJO: no puede ser `display:none` ni `visibility:hidden` — las dos lo sacan del árbol de accesibilidad, que es justo lo contrario de lo que se busca. El recorte a 1px es feo pero es el que funciona en todos los lectores. `white-space: nowrap` no es decorativo: sin él, el texto recortado a 1px de ancho se parte en una columna de letras y algunos lectores lo deletrean. */ .kk-solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Se oculta mientras el JS NO haya marcado . Sin JS no queda un botón muerto: queda el enlace directo de WhatsApp (§2.5). Ojo con la especificidad, que acá ya mordió una vez. La versión anterior era `.kk-solo-js { display: none }`, misma especificidad (0,1,0) que `.kk-btn { display: inline-flex }`, declarado más abajo — y a igual especificidad gana el último. Los ocho botones «Agregar» se veían con JavaScript desactivado. `html:not(.kk-js)` sube a (0,2,1) y gana sin recurrir a !important. */ html:not(.kk-js) .kk-solo-js { display: none; } /* -------------------------------------------------------------------------- SISTEMA TIPOGRÁFICO El brandboard muestra Arimo en CUATRO tratamientos, y esa repetición es el sistema. Se nombran acá para que se usen como tal y no se improvise un tamaño distinto en cada sección. -------------------------------------------------------------------------- */ /* Antetítulo: el tracking abierto del brandboard. Es la firma tipográfica de la marca. `text-indent` compensa el espacio que el tracking agrega después del último carácter, que si no descentra el bloque entero. */ .kk-sobretitulo { margin: 0 0 var(--kk-e3); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; color: var(--kk-texto-apoyo); } /* Título: bold, versales, apretado. Es el peso del brandboard. */ .kk-titulo { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; } .kk-bajada { max-width: 56ch; margin-top: var(--kk-e4); font-size: 1.02rem; color: var(--kk-texto-apoyo); } /* -------------------------------------------------------------------------- BOTONES Rectos, sólidos, sin sombras de colores. El streetwear no lleva pastilla. -------------------------------------------------------------------------- */ .kk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kk-e2); min-height: 50px; padding: var(--kk-e3) var(--kk-e6); border-radius: var(--kk-radio); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .kk-btn:hover { text-decoration: none; } /* El botón principal es NEGRO, no rosa. El negro es el que aguanta cualquier fondo del sitio —blanco, gris o el degradado rosa— sin recalcular nada; el rosa como relleno solo funciona con texto negro encima (7.88) y se pierde contra el propio degradado del hero. El rosa rinde más como acento. */ .kk-btn--principal { background: var(--kk-negro); color: var(--kk-blanco); } .kk-btn--principal:hover { background: #2b2530; } .kk-btn--linea { color: var(--kk-negro); box-shadow: inset 0 0 0 2px var(--kk-negro); } .kk-btn--linea:hover { background: var(--kk-negro); color: var(--kk-blanco); } /* Sobre el bloque negro del cierre se invierten. */ .kk-inverso .kk-btn--principal { background: var(--kk-blanco); color: var(--kk-negro); } .kk-inverso .kk-btn--principal:hover { background: var(--kk-rosa); } .kk-inverso .kk-btn--linea { color: var(--kk-blanco); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45); } .kk-inverso .kk-btn--linea:hover { background: var(--kk-blanco); color: var(--kk-negro); } .kk-btn--grande { min-height: 58px; padding: var(--kk-e4) var(--kk-e8); font-size: 0.9rem; } .kk-btn--bloque { width: 100%; } /* -------------------------------------------------------------------------- MOVIMIENTO — se DESACTIVA, no se atenúa (CLAUDE.md §2.5) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .kk-js .kk-anima { opacity: 1 !important; transform: none !important; } }