/* ========================================================================== SUMAQ BATH AND HOME · tokens.css Fuente única de verdad visual del sitio. Derivado de la Hoja de Marca V3 · septiembre 2026. REGLA: ningún valor de color, tipografía o medida se escribe suelto en otra hoja de estilos. Si un valor no está acá, no existe. Si hace falta uno nuevo, se agrega acá y se documenta de qué pieza de la Hoja sale. Piezas de referencia: Pieza 2 · Color → paleta, proporción, las cuatro reglas Pieza 3 · Tipografía → dos familias, siete niveles Pieza 4 · Web → retícula, botones, tarjeta de producto Pieza 5 · Marcas → logos de proveedores en un solo tono ========================================================================== */ /* -------------------------------------------------------------------------- 1. TIPOGRAFÍA ALOJADA Fuentes variables woff2 servidas desde el propio sitio: sin Google Fonts, sin llamada externa. Licencia SIL Open Font License (uso comercial libre). RESUELTO el 21-09-2026. Los dos archivos están en /assets/fonts/. La ruta es absoluta desde la raíz del sitio a propósito: tokens.css se copia a la raíz de dist y las fuentes viven en dist/assets/fonts/, así que una ruta relativa no las encontraría nunca. De dónde salieron, por si hay que rehacerlo: Playfair Display wght 400..900 37 KB https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..900 DM Sans opsz 9..40, wght 100..1000 61 KB https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000 De cada hoja se tomó el bloque del subconjunto "latin" y se guardó el woff2 tal cual, sin convertir: Google ya lo sirve variable (verificado, los dos traen tabla fvar). El subconjunto latin cubre el castellano completo —tildes, ñ, ¿, ¡, «», —, ×—. El único signo del sitio que queda fuera es el ✓ de "Agregado ✓", que cae a la fuente del sistema y se ve igual. POR QUÉ EL src LLEVA TRES LÍNEAS IGUALES. Corregido el 21-09-2026. La versión anterior declaraba un solo origen con format("woff2-variations"). Esa cadena es un formato heredado: el navegador que no la reconoce descarta la fuente entera y cae a Georgia y system-ui — exactamente el síntoma que se estaba atribuyendo a que faltaban los archivos. El mismo archivo se declara entonces tres veces, de lo más nuevo a lo más viejo, y cada navegador toma la primera línea que entiende: 1. format("woff2") tech(variations) → la sintaxis vigente de CSS Fonts 4 2. format("woff2-variations") → Safari antiguo 3. format("woff2") → todo lo demás; los ejes igual funcionan donde hay soporte variable -------------------------------------------------------------------------- */ @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-variable.woff2") format("woff2") tech(variations), url("/assets/fonts/playfair-display-variable.woff2") format("woff2-variations"), url("/assets/fonts/playfair-display-variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-variable.woff2") format("woff2") tech(variations), url("/assets/fonts/dm-sans-variable.woff2") format("woff2-variations"), url("/assets/fonts/dm-sans-variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------------------ 2. COLOR · PALETA BASE Pieza 2 de la Hoja de Marca. Tres colores de marca, cuatro de trabajo. Los CMYK de la Hoja son referenciales y no aplican a pantalla. ------------------------------------------------------------------------ */ --color-navy: #1E3A5F; /* Principal. Logo, titulares, fondos ancla */ --color-terracota: #D98248; /* La gota y superficies grandes. NUNCA texto, NUNCA botón */ --color-mostaza: #D9A441; /* Línea del logo, filetes, detalles. Texto solo sobre navy */ --color-terracota-accion:#A85A28; /* Botones y enlaces en pantalla */ --color-hueso: #FAF7F2; /* Fondo claro principal */ --color-lino: #EDE7DD; /* Franjas, tarjetas, superficies */ --color-gris-texto: #5F6670; /* Texto secundario y logos de proveedores */ --color-blanco: #FFFFFF; /* Derivados de trabajo — no son colores de marca nuevos, son el navy y el lino a opacidad controlada para bordes, capas y estados. */ --color-navy-70: rgba(30, 58, 95, 0.70); /* Capa sobre fotografía (Pieza 1) */ --color-navy-12: rgba(30, 58, 95, 0.12); /* Bordes sutiles sobre claro */ --color-navy-06: rgba(30, 58, 95, 0.06); /* Hover de superficies claras */ --color-blanco-16: rgba(255, 255, 255, 0.16); /* Bordes sobre navy */ /* ------------------------------------------------------------------------ 3. COLOR · TOKENS SEMÁNTICOS Estos son los que se usan en el CSS del sitio. Los de arriba casi nunca. Los ratios son reales, medidos sobre los hex de la Hoja. ------------------------------------------------------------------------ */ /* Fondos */ --fondo-pagina: var(--color-hueso); --fondo-superficie: var(--color-blanco); /* Tarjetas de producto */ --fondo-franja: var(--color-lino); /* Franjas, bloques alternos */ --fondo-ancla: var(--color-navy); /* Header oscuro, footer, cierres */ --fondo-capa-foto: var(--color-navy-70); /* Texto sobre claro */ --texto-titular: var(--color-navy); /* 10.76:1 sobre hueso */ --texto-cuerpo: var(--color-navy); /* 9.35:1 sobre lino */ --texto-secundario: var(--color-gris-texto); /* 5.43:1 sobre hueso */ --texto-marca-producto: var(--color-gris-texto); /* La marca del proveedor informa, no compite */ /* Texto sobre navy */ --texto-sobre-navy: var(--color-hueso); /* 10.76:1 */ --texto-sobre-navy-sec: var(--color-mostaza); /* 5.11:1 — único uso de mostaza como texto */ /* Acción */ --accion-fondo: var(--color-terracota-accion); /* blanco encima: 5.05:1 */ --accion-fondo-hover: #8F4C21; /* mismo tono, -10% luminosidad */ --accion-texto: var(--color-blanco); --enlace: var(--color-terracota-accion); /* 4.73:1 sobre hueso, 5.05:1 sobre blanco */ --enlace-hover: #8F4C21; /* Botón secundario: borde navy 1.5 px, texto navy, fondo transparente */ --secundario-borde: var(--color-navy); --secundario-texto: var(--color-navy); --secundario-fondo-hover:var(--color-navy-06); /* Bordes y separadores — las tarjetas se separan con lino y aire, no con sombra */ --borde-sutil: var(--color-navy-12); --borde-tarjeta: var(--color-lino); --borde-sobre-navy: var(--color-blanco-16); --filete-mostaza: var(--color-mostaza); /* Línea fina decorativa. Nunca texto sobre claro */ /* Foco visible — accesibilidad de teclado. Navy sobre claro, mostaza sobre navy */ --foco-color: var(--color-navy); --foco-color-sobre-navy: var(--color-mostaza); --foco-grosor: 2px; --foco-offset: 2px; /* Estado deshabilitado */ --deshabilitado-fondo: var(--color-lino); --deshabilitado-texto: var(--color-gris-texto); /* ------------------------------------------------------------------------ 3b. ESTADOS DE FORMULARIO La Hoja de Marca no tiene rojo ni verde: son colores de sistema, no de marca. Se eligieron dentro de la familia cálida de la paleta para que no se lean como pegados de otro lado, y se verificaron sobre los tres fondos claros del sitio. Se usan SOLO en formularios y avisos de estado; no son colores decorativos y no entran en ninguna otra pieza. ------------------------------------------------------------------------ */ /* Error — rojo de tierra, vecino oscuro de la terracota, no un rojo alarma */ --error-texto: #A52A1E; /* 6.66:1 hueso · 7.12:1 blanco · 5.79:1 lino */ --error-borde: #A52A1E; /* Mismo tono: el borde de un campo inválido debe gritar */ --error-fondo: #FBEDEA; /* Fondo del aviso. El texto de error encima da 6.24:1 */ /* Éxito — verde profundo y desaturado, para /gracias y confirmaciones */ --exito-texto: #2F6B4F; /* 5.89:1 hueso · 6.29:1 blanco · 5.12:1 lino */ --exito-borde: #2F6B4F; --exito-fondo: #EAF2ED; /* El texto de éxito encima da 5.52:1 */ /* El color nunca es el único portador del mensaje: todo error lleva además texto y el campo queda asociado con aria-describedby. Regla 1.4.1 de WCAG. */ /* ------------------------------------------------------------------------ 4. TIPOGRAFÍA Pieza 3. Playfair Display para titulares, DM Sans para todo lo demás. Los pt de la Hoja son la medida impresa; los px son la de pantalla. ------------------------------------------------------------------------ */ --fuente-titular: "Playfair Display", Georgia, serif; --fuente-texto: "DM Sans", system-ui, "Segoe UI", Arial, sans-serif; --peso-regular: 400; --peso-medio: 500; --peso-fuerte: 600; /* Siete niveles. Los tamaños fijos son la referencia; los fluidos son los que se usan en portada y titulares para que no revienten en móvil. */ --texto-portada: 56px; /* Playfair 400 · solo portadas y hero */ --texto-portada-fluido: clamp(34px, 6.2vw, 56px); --texto-titular-sec: 36px; /* Playfair 500 · apertura de sección */ --texto-titular-fluido: clamp(26px, 4vw, 36px); --texto-subtitulo: 24px; /* Playfair 500 */ --texto-bajada: 18px; /* DM Sans 400 */ --texto-cuerpo-tam: 16px; /* DM Sans 400 */ --texto-chico: 14px; /* DM Sans 400 · pies, metadatos, código */ --texto-etiqueta: 11px; /* DM Sans 600 · mayúsculas, tracking 18% */ --alto-linea-titular: 1.15; --alto-linea-subtitulo: 1.3; --alto-linea-cuerpo: 1.6; /* Regla de la Hoja */ --alto-linea-compacto: 1.4; --tracking-etiqueta: 0.18em; /* 18% de la Hoja */ --tracking-titular: 0; /* Playfair no se toca */ /* Medida de línea: entre 60 y 75 caracteres (regla 2 de composición) */ --medida-texto: 68ch; /* Códigos de producto y cualquier cifra: siempre tabulares (regla 4) */ --cifras-tabulares: "tnum" 1, "lnum" 1; /* Recordatorio de composición, no es un token: todo alineado a la izquierda, nunca justificado (regla 1); mayúsculas solo en etiquetas cortas y en el wordmark (regla 3). */ /* ------------------------------------------------------------------------ 5. ESPACIADO Escala de 4 px anclada en las dos medidas que fija la Hoja: canal de retícula 24 px y márgenes móvil 16 px. ------------------------------------------------------------------------ */ --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px; /* Márgenes móvil */ --espacio-5: 24px; /* Canal de retícula */ --espacio-6: 32px; --espacio-7: 48px; --espacio-8: 64px; --espacio-9: 80px; --espacio-10: 96px; --seccion-padding-y: var(--espacio-10); /* Aire vertical entre bloques (desktop) */ --seccion-padding-y-movil: var(--espacio-7); /* ------------------------------------------------------------------------ 6. RETÍCULA Y MEDIDAS Pieza 4. Ancho máximo 1200 px, 12 columnas, canal 24 px. ------------------------------------------------------------------------ */ --ancho-maximo: 1200px; --columnas: 12; --canal: var(--espacio-5); /* 24px */ --margen-lateral: var(--espacio-5); /* 24px en desktop */ --margen-movil: var(--espacio-4); /* 16px */ --radio-boton: 8px; --radio-tarjeta: 12px; --radio-campo: 8px; --radio-pildora: 999px; /* Chips de filtro activo */ /* SIN SOMBRAS. La Hoja lo dice explícito: las tarjetas se separan con lino y aire. Este token existe para que nadie invente una. */ --sombra: none; /* ------------------------------------------------------------------------ 7. COMPONENTES Medidas que la Hoja fija por nombre, para no repetirlas a mano. ------------------------------------------------------------------------ */ /* Grosores. La Hoja solo fija el 1.5 px del botón secundario; los otros dos se agregaron el 21-09-2026 al maquetar, para no escribir medidas sueltas en estilos.css. El filete mostaza es el que marca la página activa en la navegación: la Hoja pide que se marque con el filete y no con color de texto, y a 1 px no se ve. */ --borde-grosor: 1px; --filete-grosor: 2px; /* Header — 88 px de alto, logo horizontal a 56 px. Subió el 21-09-2026 con el rediseño del home. La Hoja fija 72 y 40; con el buscador metido en el centro del header, a 72 px las tres piezas —logo, campo de búsqueda y botón de cotización— quedaban apretadas contra los bordes y el logo se leía como un sello, no como una marca. Los 72/40 quedan abajo como referencia de la Hoja. */ /* Logo más grande desde el 05-10-2026, pedido por la dueña. El header crece lo justo para que el logo siga teniendo aire arriba y abajo; el buscador y los botones se centran solos porque la fila es flex con align-items: center. El archivo es SVG, así que no se pixela. */ --header-alto: 126px; --header-alto-movil: 72px; /* Compactado: lo que mide el header despues de bajar ~80 px. El logo cae a 60 y la fila a 76, asi que la franja sticky deja de comerse un sexto de la pantalla mientras se recorre el catalogo. */ --header-alto-compacto: 76px; /* Logo a 110 px desde el 06-10-2026, pedido por la dueña. Supera los 80 px del 05-10. Ahora el header SI crece: la fila pasa de 96 a 126 px, que es el logo mas 8 px de aire arriba y abajo. La fila es flex con align-items: center, asi que el buscador, los enlaces y Cotizar se centran solos. Verificado que queda aire de sobra hasta el buscador en 1920 y en 1366 — la medida real esta en Decisiones.md. */ --header-logo-alto: 110px; --header-logo-alto-compacto: 61px; /* La escala del logo compacto: 61 / 110. Va como numero suelto porque CSS no sabe dividir dos longitudes para sacar un factor de `scale()`. 61 y no 60 porque el texto "BATH & HOME" es el 13,1 % del alto del logo —medido renderizando el SVG a 4x— y a 60 quedaba en 7,9 px, apenas por debajo del minimo de 8 que se fijo el 05-10-2026. A 61 da 8,0. */ --header-logo-escala-compacta: 0.5545; /* Cuanto hay que bajar para que el header se compacte. Vive aca y lo lee sitio.js, igual que el intervalo del hero. 80 px es poco mas que una linea de texto: compacta apenas se empieza a recorrer la pagina, y no tanto como para que parpadee con el rebote del scroll del celular. */ --header-compactar-desde: 80px; /* 62 y no 56: con 56 el texto "BATH & HOME" del logo quedaba en 7,3 px, por debajo del mínimo de 8 que se fijó. Ese texto es el 13,1 % del alto del logo —medido renderizando el SVG a 4x el 05-10-2026—, así que 62 px lo dejan en 8,1. */ --header-logo-alto-movil: 62px; --header-fondo: var(--color-hueso); --header-borde: var(--borde-sutil); --header-buscador-ancho: 440px; /* Máximo del campo central */ /* Barra superior — la franja delgada de contacto, arriba del header. Es de servicio, no de marca: por eso va en navy y no compite con nada. */ --barra-alto: 36px; --barra-fondo: var(--color-navy); --barra-texto: var(--color-hueso); /* Footer — el logo negativo va a la misma altura que el del header, para que la marca abra y cierre la página con el mismo tamaño. 21-09-2026. Subió con el header el 22-09-2026: a 40 px al lado de un header de 56 el cierre se leía más flojo que la apertura. */ /* El del pie ya NO sigue al del header: se separaron el 05-10-2026, cuando el del header pasó a 80 px. Sobre el navy del cierre, 80 px es desproporcionado y el pedido era solo para el header. 60 px es el valor que el header tenía hasta entonces, así que el pie no cambia. */ --footer-logo-alto: 60px; /* Botones */ --boton-alto: 48px; --boton-alto-chico: 40px; --boton-padding-x: var(--espacio-5); --boton-borde-secundario: 1.5px; /* Medida literal de la Hoja */ /* El boton de WhatsApp de la lista de cotizacion. Es el mismo verde del boton flotante —la unica excepcion de color fuera de paleta del sitio— y por eso reusa su token en vez de declarar otro verde. Va al lado del boton terracota y del mismo tamano: son dos caminos que valen lo mismo, no uno principal y uno secundario. El radio y la falta de sombra salen de la Hoja, igual que en cualquier otro boton. 06-10-2026 */ --boton-whatsapp-fondo: var(--fab-fondo); --boton-whatsapp-fondo-hover: var(--fab-fondo-hover); --boton-whatsapp-texto: var(--color-blanco); /* Un solo botón primario por pantalla o por tarjeta. */ /* Tarjeta de producto — orden fijo: foto · marca · nombre · código · acción · ficha */ --tarjeta-padding: var(--espacio-4); --tarjeta-imagen-ratio: 1 / 1; /* thumb 400×400 */ --tarjeta-min: 240px; /* Base del auto-fill de la grilla */ --tarjeta-gap: var(--espacio-5); /* Ficha de producto */ --galeria-ratio: 1 / 1; /* fotos 1000×1000, hasta 3 por producto */ --galeria-miniatura: 72px; /* Tabla de especificaciones — etiqueta izquierda DM Sans 600, valor derecha */ --spec-etiqueta-ancho: 38%; --spec-fila-padding-y: var(--espacio-3); --spec-borde: var(--borde-sutil); /* Franja de marcas — un solo tono, es navegación */ --marca-logo-alto: 28px; /* Tope de la lista de líneas del catálogo. Vainsa tiene 51 líneas: sin tope, la columna de filtros mide más de dos pantallas y la grilla de productos queda flotando al lado de una lista infinita. 320 px son unas diez líneas visibles, suficiente para ver que hay más y que se puede rodar, sin tapar el resto de los filtros. */ --filtros-lista-tope: 320px; --marca-logo-color: var(--color-gris-texto); /* Sobre claro */ --marca-logo-color-navy: var(--color-blanco); /* Sobre navy */ --marca-logo-opacidad: 0.75; --marca-logo-opacidad-hover: 1; /* Los colores de los proveedores no entran: ni el rojo de Trébol, ni el naranja de Fratelli, ni el celeste de Italgrif. Regla 4 de color. */ /* Altura por logo: la franja se equilibra por PESO ÓPTICO, no por altura. Decidido el 21-09-2026. Los 28 px de arriba son el ancla de la fila, no una medida que los cuatro tengan que cumplir al pixel. Por qué: a 28 px parejos, Fratelli ocupa 223 px de ancho y Vainsa 69, y el área de tinta de Fratelli es 3,4 veces la de los otros tres (2.709 px² contra 751, 841 y 797). La fila se lee como un logo grande y tres chicos. Vainsa sube porque es un lockup de dos líneas —VAINSA sobre INNOVA—, así que a la misma altura sus letras miden la mitad que las de los otros. Los valores salen de igualar el área de tinta y después corregir a ojo sobre la franja real; quedaron verificados en _revision/. */ --marca-logo-alto-vainsa: 32px; --marca-logo-alto-italgrif: 26px; --marca-logo-alto-trebol: 26px; --marca-logo-alto-fratelli: 18px; /* La franja del home lleva los mismos logos más grandes, manteniendo el balance: se multiplican los cuatro por el mismo factor, así que la relación entre ellos no cambia. 21-09-2026, con el rediseño del home: a 28 px la franja se leía como un pie de página y no como lo que es, que es la razón por la que el cliente entra al catálogo. */ --marca-logo-escala: 1.75; /* Columna de filtros del catálogo */ --filtros-ancho: 264px; --filtros-gap: var(--espacio-5); /* Botón flotante de WhatsApp — fijo abajo a la derecha, en todas las páginas. Verde de WhatsApp, decidido el 17-09-2026. La regla 4 de la Hoja habla de los colores de los PROVEEDORES (Trébol, Fratelli, Italgrif), no de plataformas; y en el canal por el que entra toda la venta, el reconocimiento del globo verde vale más que la coherencia cromática. Es el único color fuera de paleta autorizado en el sitio. Contraste: el verde de marca de WhatsApp (#25D366) deja el ícono blanco en 1.98:1 y no pasa el mínimo de 3:1 que WCAG pide para gráficos. Se usa #1DA851, la variante oscura del mismo verde: da 3.10:1 con blanco y se sigue leyendo como WhatsApp. Corregido el 21-09-2026. El aria-label sigue siendo obligatorio igual. */ /* 64 desde el 06-10-2026, pedido por la duena: a 56 el globo se perdia en pantallas grandes. El icono sigue siendo la mitad del boton. */ --fab-tamano: 64px; --fab-fondo: #1DA851; /* Blanco encima: 3.10:1 */ --fab-fondo-hover: #189447; /* Blanco encima: 3.91:1 */ --fab-icono: var(--color-blanco); --fab-icono-tamano: 32px; /* La mitad del botón. 06-10-2026 */ --fab-margen: var(--espacio-5); /* --- Bot de preguntas frecuentes · 22-09-2026 ------------------------- Un segundo botón flotante, a la IZQUIERDA del de WhatsApp. Navy, que es el color principal: no compite con el verde y deja claro cuál es cuál. La separación es el ancho del botón de WhatsApp más un canal, para que queden lado a lado sin taparse. Se calcula y no se escribe a mano: el día que cambie --fab-tamano, este se corre solo. */ --faq-separacion: calc(var(--fab-margen) + var(--fab-tamano) + var(--espacio-3)); --faq-fondo: var(--color-navy); /* El navy un escalón más oscuro, para el hover. Mismo tono, no otro color: el botón tiene que seguir leyéndose igual al pasar el mouse. */ --faq-fondo-hover: #152943; --faq-icono: var(--color-hueso); /* 10.76:1 sobre navy */ /* El aro blanco. El boton es navy y el footer tambien, asi que sin aro el circulo desaparece cuando la pagina llega al final. No es una sombra: es un borde solido, que la regla 11 si permite. Va por dentro de los 64 px —el disco navy queda en 58— para que los dos botones midan lo mismo y sigan alineados abajo sin tocar ningun margen. */ --faq-aro-grosor: 3px; --faq-aro-color: var(--color-blanco); /* El panel. 360 px es el ancho de un celular chico: así en escritorio se ve igual de angosto que en móvil y el texto no se estira a una medida que no se puede leer de un vistazo. */ --faq-panel-ancho: 360px; --faq-panel-alto-max: min(560px, calc(100vh - var(--espacio-7) * 2)); --faq-panel-fondo: var(--fondo-superficie); --faq-panel-borde: var(--borde-sutil); /* Huecos de imágenes de ambiente todavía no producidas. 8 en total: 1 hero + 6 categorías + 1 nosotros. Placeholder en lino. */ --placeholder-fondo: var(--color-lino); --placeholder-texto: var(--color-gris-texto); --hero-ratio: 16 / 9; --categoria-ratio: 1 / 1; /* Las 6 de categoría pasaron a cuadradas el 22-09-2026: los originales nuevos son 1024 × 1024. Antes era 4 / 3. */ /* Hero — la foto va con su color real, sin capa encima. 21-09-2026. DESVÍO DE LA HOJA, decidido por Julio: la Pieza 1 pide capa navy al 70% sobre toda fotografía que lleve texto. Acá no hay capa: hay un degradado que oscurece SOLO el lado del texto y deja la foto limpia del otro. EL DEGRADADO ES CARBÓN NEUTRO, NO NAVY. Corregido el 21-09-2026. Con navy la foto se teñía de azul y perdía la madera, el barro y la toalla terracota: justo la temperatura que hace que el ambiente se lea como una casa peruana y no como un renderizado. Un gris carbón neutro oscurece sin virar el color. No es un color de marca nuevo ni entra en ninguna otra pieza: es una sombra, del mismo modo que --color-navy-70 era una capa. Por eso vive acá y no en la paleta. Lo que se gana: la foto se ve como es. Lo que se pierde: la capa garantizaba el contraste con cualquier foto; el degradado hay que MEDIRLO cada vez que se cambie la imagen del hero. Medición del 21-09-2026 en [[Sistema visual]]. */ --sombra-foto: 24, 24, 27; /* carbón neutro, en RGB para el rgba() */ /* Aligerado el 05-10-2026. Antes arrancaba en 0.90 y llegaba a 0.86 en el 38 %: oscurecía la foto mucho más de lo que el texto necesitaba. Los valores de ahora no son a ojo. Se midió, sin overlay, el píxel más claro detrás de CADA bloque de texto en las 6 fotos, y se despejó la opacidad mínima para llegar al contraste pedido. El peor caso en escritorio es **52 %**, en los botones de hero-6. Las paradas siguen a dónde llega cada bloque en una pantalla de 1920, medido y no supuesto: los botones terminan en el 39 %, la bajada en el 48 % y el titular en el **55 %**. Por eso la meseta de 0.60 llega al 48 % —donde acaba lo que pide 4.5:1— y recién ahí empieza a bajar, con 0.50 en el 56 % para el final del titular, que solo pide 3:1. La primera versión dejaba caer el overlay desde el 42 % porque daba por hecho que el titular terminaba ahí. Llegaba hasta el 55 %, y hero-1 y hero-2 se quedaban en 2.8:1 y 2.6:1. Del 70 % en adelante el overlay prácticamente no está: 0.14 y 0.06. Ahí es donde está el producto y ahí la foto se ve como es. */ --hero-degradado: linear-gradient( 90deg, rgba(var(--sombra-foto), 0.62) 0%, rgba(var(--sombra-foto), 0.60) 48%, rgba(var(--sombra-foto), 0.50) 56%, rgba(var(--sombra-foto), 0.14) 70%, rgba(var(--sombra-foto), 0.06) 100%); /* En móvil el texto ocupa todo el ancho y el titular arranca al 36% del alto, así que el degradado va vertical y oscuro desde ahí, no desde la mitad. El 20% de arriba queda casi limpio: es la franja de foto que se ve de verdad. */ /* En móvil el texto ocupa casi todo el ancho, así que acá el overlay es parejo y va de arriba abajo. Aligerado igual: antes llegaba a 0.92. El peor caso medido es **55 %**, en la bajada de hero-1. Va 0.62 abajo y 0.56 donde arranca el titular, con el 22 % de arriba casi limpio: esa franja es la foto que de verdad se ve en un celular. */ --hero-degradado-movil: linear-gradient( 180deg, rgba(var(--sombra-foto), 0.05) 0%, rgba(var(--sombra-foto), 0.14) 22%, rgba(var(--sombra-foto), 0.56) 32%, rgba(var(--sombra-foto), 0.60) 55%, rgba(var(--sombra-foto), 0.62) 100%); --hero-alto: 560px; --hero-alto-movil: 560px; /* --- Carrusel del hero · 05-10-2026 ----------------------------------- Seis fotos que rotan solas. Los 6 s los pidió la dueña; el fundido de 1,2 s es lo que hace que se lea como un cambio de luz y no como un salto. Más largo se siente lento con 6 fotos, más corto corta el ojo. */ --hero-rotacion: 6000ms; --hero-fundido: 1200ms; /* Los puntos. El punto se ve de 10 px, pero el área que se toca mide 44, que es el mínimo que pide WCAG 2.5.5 para un objetivo táctil. El relleno es transparente: se toca más grande de lo que se ve. */ --hero-punto-tamano: 10px; --hero-punto-toque: 44px; --hero-punto: rgba(255, 255, 255, 0.45); --hero-punto-activo: var(--color-hueso); /* La etiqueta de cada slide, abajo a la derecha. Blanca sobre la foto, sin sombra: la legibilidad la da el propio degradado del hero más una pizca de carbón detrás, del mismo color que el overlay. */ /* 0.68 y no menos: la etiqueta vive en la zona donde el overlay del hero casi no está —0.06 a la derecha, 0.05 arriba en móvil, a propósito, para que la foto se vea—. Con 0.38 el texto blanco daba 1,0:1 sobre una pared clara. Con 0.68, sobre blanco puro queda en 6,5:1, así que cumple con cualquier foto que entre. Es el mismo carbón del overlay, no un gris nuevo. Medido el 05-10-2026. */ --hero-etiqueta-fondo: rgba(var(--sombra-foto), 0.68); --hero-etiqueta-tracking: 0.04em; /* El subtítulo rotativo: dos frases que se alternan con el carrusel. */ --hero-frase-tracking: 0.08em; --hero-frase-fundido: 420ms; /* --- Nuestros más vendidos · 05-10-2026 ------------------------------- La franja va de borde a borde. El ancho de tarjeta es el mismo que en la grilla del catálogo, para que se vean iguales en los dos sitios. */ --vendidos-tarjeta: 280px; /* Velocidad de la cinta, en pixeles por segundo. 38 es el punto donde se alcanza a leer el nombre de una tarjeta mientras pasa: a 60 hay que perseguirla con la vista y a 20 parece colgada. Una tarjeta de 304 px tarda 8 segundos en cruzarse entera. */ --vendidos-velocidad: 38px; /* El sello "Mas vendido". Mostaza con texto navy: 5,13:1 medido, por encima del 4,5 que pide AA para texto chico. Es el unico lugar del sitio donde la mostaza lleva texto encima, y por eso el token es propio y no reusa el filete. */ --vendidos-sello-fondo: var(--color-mostaza); --vendidos-sello-texto: var(--color-navy); --vendidos-sello-radio: 8px; /* Las flechas de la cinta se fueron el 12-10-2026, al pasar a dos filas. Sus tokens se van con ellas: un token que no usa nadie es una pista falsa para el que venga después. Si vuelven, vuelven con su medida. */ /* La sangria lateral de la pista se saco el 06-10-2026. Alineaba la primera tarjeta con el contenedor de 1200 px, pero la cinta continua tiene que ocupar TODO el ancho —las tarjetas pasan tambien por el hueco de la izquierda— asi que un padding ahi deja un vacio permanente. Con la sangria se fue tambien el `scroll-padding-left` que la acompanaba y el bug de calce que resolvia: la cinta ya no se mueve con scrollLeft. */ /* Tarjetas grandes: las dos puertas de entrada del home */ --puerta-ratio: 3 / 2; --puerta-degradado: linear-gradient( 180deg, rgba(var(--sombra-foto), 0.05) 0%, rgba(var(--sombra-foto), 0.55) 55%, rgba(var(--sombra-foto), 0.90) 100%); /* En celular la tarjeta mide un tercio de lo que mide en escritorio, pero el texto ocupa casi lo mismo: arranca al 25 % del alto, donde el degradado de arriba todavia esta en 0,25, en vez de arrancar al 60 %. Con las fotos del 06-10-2026 eso dejaba el titular en 2,07:1 y el parrafo en 3,39:1, por debajo del 3 y del 4,5 que piden. Este degradado arranca oscuro desde el primer pixel. Medido, no estimado: el valor se subio hasta que las seis medidas pasaran. */ --puerta-degradado-movil: linear-gradient( 180deg, rgba(var(--sombra-foto), 0.32) 0%, rgba(var(--sombra-foto), 0.66) 45%, rgba(var(--sombra-foto), 0.92) 100%); /* Chips de subcategoría sobre la tarjeta de categoría */ --chip-fondo: var(--color-blanco); --chip-borde: var(--borde-sutil); /* Tarjeta de categoría con foto de ambiente y el nombre encima. El degradado es el mismo carbón del hero: la foto conserva su color y solo se oscurece la franja de abajo, donde va el nombre. 22-09-2026. */ --categoria-degradado: linear-gradient( 180deg, rgba(var(--sombra-foto), 0.00) 40%, rgba(var(--sombra-foto), 0.45) 68%, rgba(var(--sombra-foto), 0.86) 100%); /* ------------------------------------------------------------------------ 8. MOVIMIENTO Y CAPAS Discreto. La marca asesora, no grita: tampoco se mueve de más. ------------------------------------------------------------------------ */ --transicion-rapida: 120ms ease-out; --transicion: 200ms ease-out; --capa-base: 0; --capa-sticky: 100; /* Columna de filtros pegada */ --capa-header: 200; --capa-fab: 300; /* WhatsApp flotante */ --capa-panel: 400; /* Filtros en móvil */ --capa-modal: 500; } /* -------------------------------------------------------------------------- 9. AJUSTES POR ANCHO Solo lo que cambia de medida. El color no cambia nunca. -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --margen-lateral: var(--margen-movil); --header-alto: var(--header-alto-movil); --seccion-padding-y: var(--seccion-padding-y-movil); --tarjeta-min: 150px; --canal: var(--espacio-4); } } /* -------------------------------------------------------------------------- 10. ACCESIBILIDAD DE MOVIMIENTO -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --transicion-rapida: 1ms linear; --transicion: 1ms linear; } } /* ========================================================================== LAS CUATRO REGLAS DE COLOR — verificadas con ratios reales Si un cambio futuro rompe una de estas, el cambio está mal, no la regla. 1. Terracota Sumaq (#D98248) es la gota, no el botón. Blanco encima da 2.90:1 · no pasa el mínimo web de 4.5:1. Los botones usan Terracota acción (#A85A28): 5.05:1 sobre blanco. 2. Mostaza (#D9A441) es línea, no texto sobre claro. Sobre hueso da 2.10:1. Sobre navy da 5.11:1 — ahí sí puede ser texto. 3. Terracota acción solo sobre blanco o hueso. Sobre blanco 5.05:1 · sobre hueso 4.73:1 · sobre lino baja a 4.11:1. 4. Los colores de los proveedores no entran en piezas Sumaq. PROPORCIÓN EN PANTALLA: hueso + lino 60% · navy 30% · el 10% restante repartido entre mostaza y terracota. El acento que abunda deja de ser acento. ========================================================================== */