/* ========================================================================== tokens.css — TODO el color y la tipografía del sitio salen de acá. Ningún otro archivo CSS escribe un color literal. Adaptado desde alisaplack el 11-sep-2026. El original quedó al lado como tokens.css.alisaplack.bak por si hay que comparar una decisión. ========================================================================== */ /* -------------------------------------------------------------------------- PALETA DE MARCA — muestreada del logo (uploads/logo.jpeg), no estimada a ojo. Los tres colores dominantes del archivo son: #FBBB11 ámbar -> el arco del isotipo y la banda "SOLUCIONES METALÚRGICAS" #0D0D0D negro -> "CARUSO" y la "C" del isotipo #6E6C6D gris -> "CENTRO MDQ SA" y la media luna del isotipo EL ÁMBAR NO ES UN COLOR DE TEXTO. Medido contra blanco da 1.72:1: no alcanza ni para texto grande. Y al revés, texto blanco sobre ámbar da el mismo 1.72:1. El ámbar es una SUPERFICIE que lleva texto NEGRO (11.31:1), que es exactamente como lo usa el logo en su banda inferior. Por eso --acento-contraste acá es negro, no blanco como en alisaplack. Para escribir en "ámbar" sobre blanco está --marca-ambar-texto (#9A6E00, 4.56:1). Es el mismo tono empujado a oscuro hasta pasar AA. -------------------------------------------------------------------------- */ :root { --marca-ambar: #FBBB11; /* el del logo: superficies, no texto */ --marca-ambar-osc: #E0A400; /* hover de superficie ámbar */ --marca-ambar-texto: #9A6E00; /* ámbar legible sobre blanco (4.56:1) */ --marca-ambar-hondo: #7A5700; /* ámbar de texto sobre fondos claros (6.58:1) */ --marca-ambar-claro: #FEF6E0; --marca-ambar-suave: #FCE9B4; --marca-negro: #0D0D0D; /* 19.44:1 sobre blanco */ --marca-negro-suave: #1F1E1E; --marca-grafito: #2E2C2D; --marca-gris: #6E6C6D; /* 5.21:1 sobre blanco -> pasa AA */ --marca-gris-claro: #F2F1F1; --marca-gris-suave: #DAD8D9; } /* -------------------------------------------------------------------------- ACENTO — DOS OPCIONES Se mantiene el mismo mecanismo que alisaplack: el layout escribe data-acento="a" | "b" en y manda el bloque que corresponda. Se cambia desde Panel > Ajustes > Diseño > "Color de acento del sitio". OPCIÓN A (activa por defecto): acento ÁMBAR. Industrial y directo, igual que el logo. El ámbar manda en botones y destacados —siempre con texto negro encima— y el negro es el color estructural. Es la lectura más fiel a la marca. OPCIÓN B: acento GRAFITO. Más sobrio y técnico. El negro pasa a ser el color de acción y el ámbar queda para señalar cosas puntuales: ofertas, badges, el filo superior. Útil si el catálogo termina con mucha foto de producto y el ámbar compite demasiado con ellas. -------------------------------------------------------------------------- */ /* --- OPCIÓN A: acento ámbar ----------------------------------------------- */ :root, html[data-acento="a"] { --acento: var(--marca-ambar); --acento-osc: var(--marca-ambar-osc); --acento-mas-osc: var(--marca-ambar-texto); --acento-claro: var(--marca-ambar-claro); --acento-suave: var(--marca-ambar-suave); --acento-contraste: #0D0D0D; /* NEGRO. Ver nota de arriba. */ --acento-texto: var(--marca-ambar-texto); /* links y texto en ámbar */ --secundario: var(--marca-negro); --secundario-claro: var(--marca-gris-claro); --secundario-fuerte: var(--marca-grafito); } /* --- OPCIÓN B: acento grafito --------------------------------------------- */ html[data-acento="b"] { --acento: var(--marca-grafito); --acento-osc: var(--marca-negro-suave); --acento-mas-osc: var(--marca-negro); --acento-claro: var(--marca-gris-claro); --acento-suave: var(--marca-gris-suave); --acento-contraste: #FFFFFF; /* acá sí: blanco sobre grafito */ --acento-texto: var(--marca-grafito); --secundario: var(--marca-ambar-texto); --secundario-claro: var(--marca-ambar-claro); --secundario-fuerte: var(--marca-ambar); } /* -------------------------------------------------------------------------- NEUTROS Y SUPERFICIES Se sostiene el blanco y el aire del original, pero los neutros pierden el tinte teal y pasan a gris puro, que es lo que pide una paleta de negro+ámbar. -------------------------------------------------------------------------- */ :root { --blanco: #FFFFFF; --fondo: #FFFFFF; --fondo-suave: #F4F3F3; --fondo-crudo: #FAFAF9; --fondo-oscuro: #131212; /* pie y franjas oscuras */ --texto: #1A1A1A; --texto-medio: #4A4A4A; --texto-suave: #6E6C6D; /* el gris de marca, que pasa AA */ --texto-tenue: #9A9899; --texto-invertido: #FFFFFF; --borde: #E4E2E2; --borde-fuerte: #CFCCCD; --borde-suave: #EFEDED; /* Estados */ --ok: #1F7A3D; --ok-claro: #E8F4EC; --alerta: #9A6206; --alerta-claro: #FCF3E2; --error: #B3261E; --error-claro: #FBEAE9; --info: var(--marca-grafito); --info-claro: var(--marca-gris-claro); --whatsapp: #25D366; --whatsapp-osc: #1DA851; } /* -------------------------------------------------------------------------- TIPOGRAFÍA El original usaba Fraunces (serif de carácter). No aplica acá: la marca es industrial y el logo está escrito en una geométrica ancha de terminales cuadradas, familia Eurostile. Chakra Petch es lo más cerca que se llega en Google Fonts: cuadrada, con las esquinas cortadas y buen peso en mayúsculas. Se usa SOLO para titulares y números; el cuerpo sigue en Inter, que es la que se lee de verdad en una ficha técnica llena de medidas y espesores. Ambas con display=swap: si tardan, el texto se ve igual. -------------------------------------------------------------------------- */ :root { --fuente-titulo: "Chakra Petch", "Segoe UI", system-ui, Helvetica, Arial, sans-serif; --fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Escala fluida: mobile-first, crece sola hasta desktop */ --txt-xs: 0.75rem; --txt-sm: 0.875rem; --txt-base: 1rem; --txt-md: 1.0625rem; --txt-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --txt-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --txt-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); --txt-3xl: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem); --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700; --alto-apretado: 1.15; --alto-normal: 1.5; --alto-suelto: 1.7; /* Los titulares de esta marca van en mayúscula y espaciados, como el logo. */ --track-titulo: 0.04em; --track-banda: 0.20em; } /* -------------------------------------------------------------------------- ESPACIADO, RADIOS, SOMBRAS, TIEMPOS Radios más chicos que en alisaplack a propósito: esta marca es de esquina recta. Las sombras se rearman sobre el negro de marca, no sobre el teal. -------------------------------------------------------------------------- */ :root { --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --ancho-max: 1240px; --ancho-texto: 68ch; --pad-lateral: 1rem; --pad-lateral-md: 2rem; --radio-sm: 3px; --radio: 5px; --radio-md: 8px; --radio-lg: 12px; --radio-full: 999px; --sombra-sm: 0 1px 2px rgba(13, 13, 13, 0.07); --sombra: 0 2px 8px rgba(13, 13, 13, 0.08); --sombra-md: 0 8px 24px rgba(13, 13, 13, 0.10); --sombra-lg: 0 18px 44px rgba(13, 13, 13, 0.14); /* Corte diagonal de la banda del logo. Lo usan la bandita de sección y los badges, para que el gesto de la marca se repita y no quede sólo en el logo. */ --sesgo-banda: -12deg; --transicion: 160ms ease; --transicion-lenta: 280ms cubic-bezier(0.22, 1, 0.36, 1); --z-header: 100; --z-flotante: 200; --z-modal: 300; --alto-header: 68px; /* Espacio que hay que dejarle abajo a la derecha a un widget de chat flotante (el launcher de RespondIA: 76 px con el avatar propio, caruso-avatar.png). Si algún día se saca el chat, esto vuelve a 0 y el botón de WhatsApp se apoya solo contra el borde. */ --chat-launcher: 76px; --chat-margen: 20px; } /* -------------------------------------------------------------------------- LOGO Salen de uploads/logo.jpeg (1536x512, fondo blanco) pasado a PNG con transparencia el 15-sep-2026. Tres versiones en assets/img: caruso-logo.png fondos claros: header, panel, cartel de obra caruso-logo-blanco.png el pie oscuro: el negro pasa a blanco, el ámbar queda caruso-logo-negro.png la comandera térmica: todo negro pleno, sin ámbar Si el cliente manda el vector (.ai / .svg), conviene regenerarlas de ahí. -------------------------------------------------------------------------- */ :root { --logo-mezcla: normal; --logo-alto: 42px; --logo-alto-md: 52px; --logo-alto-pie: 46px; --logo-filtro-pie: none; } /* Respeta a quien pidió menos movimiento en el sistema operativo. */ @media (prefers-reduced-motion: reduce) { :root { --transicion: 0ms; --transicion-lenta: 0ms; } }