/* ============================================================ FLOR DE LOTO — DESIGN TOKENS v1.2 · 2026-09-20 (copia del sitio) Fuente: global_brain/brands/flor_de_loto/tokens.css v1.2 — NO editar aca. Si un valor cambia, cambia alla y se vuelve a copiar. Doc viva: sistema.html (mismo directorio) Marca LIGHT-ONLY. No hay modo oscuro y no se agrega: las piezas son HTML de un archivo que se mandan por WhatsApp y se imprimen. REGLA DE ORO: un componente NUNCA toca un primitivo. El boton usa --accion, no --verde-500. ============================================================ */ /* ---------- LAS FUENTES ---------- El sitio las carga por CDN desde el del index.html (Fontshare + Google Fonts). La marca, en cambio, se self-hostea: las piezas que se mandan por WhatsApp y se imprimen no pueden depender de que haya internet. Ver el bloque @font-face en global_brain/brands/flor_de_loto/tokens.css. DEUDA ANOTADA: el sitio deberia self-hostear tambien. No se cambio aca porque toca la carga del index.html, no los tokens. */ :root{ /* ---------- NIVEL 1 — PRIMITIVOS (no usar en componentes) ---------- Ratios medidos con WCAG 2.1 el 2026-09-18. "crudo" = #FAF6EA (fondo) "superf" = #F0EAD8 (tarjetas) */ --crudo-50: #FAF6EA; /* fondo principal. El crudo de Rocio */ --crudo-100: #F0EAD8; /* superficie elevada: tarjetas, bloques */ --verde-300: #74826F; /* 3.76 crudo · 3.38 superf. GRAFICO, no texto */ --verde-500: #2A5239; /* 8.22 crudo · 7.39 superf AAA */ --verde-700: #1E3D2B; /* 11.06 crudo AAA. Hover del verde */ --rosa-300: #C4568E; /* 3.83 crudo · 3.45 superf — NUNCA texto */ --rosa-500: #AB3C75; /* 5.35 crudo · 4.81 superf AA */ --tinta-400: #6E6458; /* 5.36 crudo · 4.82 superf AA — EL LIMITE */ --tinta-600: #5C5248; /* 7.05 crudo · 6.34 superf AAA */ --tinta-900: #1A1009; /* 17.32 crudo · 15.57 superf AAA */ --ambar-700: #9A4708; /* 5.93 crudo · 5.33 superf AA en ambos */ --rojo-700: #B03325; /* 5.81 crudo · 5.22 superf AA en ambos */ --velo-8: rgba(42,82,57,.08); /* verde al 8% — fondo de enfasis */ --velo-14: rgba(42,82,57,.14); /* verde al 14% — linea decorativa */ /* ---------- NIVEL 2 — SEMANTICOS (esto usan los componentes) ------- */ /* Superficies */ --fondo: var(--crudo-50); --superficie: var(--crudo-100); --superficie-enfasis: var(--velo-8); /* badge, bloque marcado. = #E9E9DC. Encima entra verde (7.25), tinta (15.29) y texto-3 (4.73) */ --fondo-velo: rgba(250,246,234,.92); /* el crudo casi opaco: barra fija que deja ver el scroll por detras. Va SIEMPRE con backdrop-filter — sin el, el texto de abajo se transparenta y el contraste deja de valer */ /* Texto — exactamente tres niveles. No hay un cuarto. */ --texto: var(--tinta-900); /* lo que importa */ --texto-2: var(--tinta-600); /* bajadas, secundario */ --texto-3: var(--tinta-400); /* etiquetas, metadata. EL LIMITE: nada mas claro carga texto */ /* Accion */ --accion: var(--verde-500); --accion-hover: var(--verde-700); --enlace: var(--verde-500); --enlace-hover: var(--verde-700); /* Sobre el verde — la escala invertida. Una seccion de verde a toda pagina necesita los MISMOS tres niveles de texto que el crudo, y no se resuelven bajando la opacidad a ojo: por debajo del 65% el crudo deja de ser color de texto. */ --sobre-accion: var(--crudo-50); /* 8.22 AAA */ --sobre-accion-2: rgba(250,246,234,.82); /* 6.13 AA */ --sobre-accion-3: rgba(250,246,234,.65); /* 4.54 AA — EL LIMITE */ --linea-sobre-accion: rgba(250,246,234,.55); /* 3.71 — minimo grafico. Borde de un circulo numerado, de un control */ --linea-suave-sobre-accion: rgba(250,246,234,.22); /* 1.77 — decorativa: separa bloques */ /* Acento secundario — la nota de calidez, nunca el tema */ --acento: var(--rosa-500); /* si el rosa lleva texto, es este */ --acento-sobre: var(--crudo-50); /* 5.78 sobre rosa-500 */ --decorativo: var(--rosa-300); /* bloques y formas. Si por excepcion lleva texto, va TINTA (4.52), no crudo (3.83) */ /* Lineas — son DOS y hacen trabajos distintos */ --linea-suave: var(--velo-14); /* 1.25 — separar tarjetas y filas. Decorativa */ --linea-control: var(--verde-300); /* 3.76 — borde de input, select, checkbox. Elemento grafico que informa donde escribir */ /* Estado */ --ok: var(--verde-500); /* reutiliza el verde de marca: no se agrega un verde extra */ --alerta: var(--ambar-700); --error: var(--rojo-700); --sobre-estado: #FFFFFF; /* 6.40 sobre alerta · 6.28 error */ /* ---- LAS SUPERFICIES QUE PONE EL NAVEGADOR ---- Las partes que no dibuja nadie. Sin declararlas quedan con el default del navegador, que no es de ninguna marca y se ve igual en todas las apps del mundo. Son tokens, no sugerencias. */ --seleccion-fondo: var(--verde-500); /* con crudo encima: 8.22 AAA */ --seleccion-texto: var(--crudo-50); --cursor: var(--verde-500); /* donde escribo es ACCION... */ /* ...y donde estoy es el foco, que va en rosa a proposito */ --subrayado-salto: 3px; /* el subrayado despegado de las colas de la g y la p */ /* Foco — distinto al color de accion, si no se confunde con el normal */ --foco: var(--rosa-500); /* 5.35 sobre crudo */ --foco-ancho: 2px; --foco-salto: 3px; /* outline-offset. OBLIGATORIO: sobre un boton verde el rosa da 1.54, o sea que el anillo TIENE que caer afuera, sobre el crudo */ /* ---------- TIPOGRAFIA ---------- */ --f-display: "Cabinet Grotesk", "DM Sans", system-ui, sans-serif; --f-cuerpo: "DM Sans", system-ui, -apple-system, sans-serif; --f-dato: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* SOLO precio, duracion y codigo de servicio. Nunca titulares ni texto corrido. */ /* Escala con rol. No hay tamanos fuera de esta lista. */ --t-h1: clamp(2rem, 6.5vw, 3.2rem); /* nombre en el hero */ --t-h2: clamp(1.4rem, 4vw, 2rem); /* secciones */ --t-h3: 1.1rem; /* etiqueta de servicio */ --t-cifra: clamp(1.8rem, 5vw, 2.6rem); /* precio, dato que cierra */ --t-cuerpo: 1rem; --t-chico: .9rem; /* nota al pie, aclaracion */ --t-label: .72rem; /* VERSALITAS con tracking */ --lh-display: 1.15; --lh-cuerpo: 1.65; /* lectura comoda en celular */ --lh-corto: 1.35; /* El apriete CRECE con el tamano. Cabinet Grotesk en peso liviano necesita cerrar el espacio para que el titular no se desarme. */ --ls-h1: -.02em; /* 32-51px */ --ls-h2: -.015em; /* 22-32px */ --ls-cifra: -.015em; --ls-display: var(--ls-h1); /* alias heredado, no usar en codigo nuevo */ --ls-label: .1em; /* el tracking de las versalitas */ --ls-dato: .04em; /* la mono respira un poco */ --p-cuerpo: 400; --p-medio: 500; /* labels y enfasis dentro del cuerpo */ --p-display: 300; /* EL TITULAR NO ENGORDA: crece de tamano, no de peso. Es la voz de la marca. Poner 600 o 700 aca la mata. */ /* No hay mas pesos. 200, 600, 700 y 800 no se usan. */ /* ---------- ESPACIADO — base 4 ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 80px; --pad-borde: clamp(1.15rem, 5vw, 2rem); /* margen lateral */ --ritmo-seccion: clamp(3rem, 9vw, 5.5rem); /* aire vertical entre secciones de pagina */ --ancho-max: 1080px; /* layout completo */ --ancho-lectura: 640px; /* columna de texto */ /* ---------- BORDES Y RADIOS ---------- */ --linea-fina: 1px; /* filas de lista, bordes de tarjeta */ --linea-gruesa: 2px; /* cabecera de tabla, subrayado de seccion */ --r-0: 0; /* el token existe aunque valga cero */ --r-1: 8px; /* controles: boton, input, chip */ --r-2: 14px; /* tarjetas y bloques */ --r-pill: 999px; /* badge, pastilla */ --r-circulo: 50%; /* avatar */ /* Radios que NO existen: 4px, 6px, 10px, 12px, 16px, 20px. */ /* ---------- SOMBRA ---------- */ /* EL SISTEMA NO TIENE SOMBRAS. Ver la regla 5 al pie. La profundidad se hace con --superficie + --linea-suave. */ /* ---------- MOVIMIENTO ---------- */ --dur-rapida: 200ms; /* hover, cambio de color */ --dur-entrada: 400ms; /* fade-in al entrar al viewport */ --curva: cubic-bezier(.22,.61,.36,1); /* ease-out */ /* Nada dura mas de 500ms. Ver prohibidos en la regla 10. */ /* ---------- TACTIL ---------- */ --toque-min: 44px; /* alto minimo de todo lo que se toca. Mobile-first: el celular es prioridad #1 */ } /* ============================================================ LAS REGLAS QUE LOS NUMEROS IMPONEN No son preferencias de estilo. Son lo que el contraste obliga. ============================================================ 1. --decorativo (#C4568E) NUNCA carga texto sobre crudo: 3.83, no llega a 4.5. Si un bloque rosa claro tiene que llevar texto, el texto va en TINTA (4.52), nunca crudo ni blanco (4.14). Para texto rosa existe --acento (#AB3C75, 5.35). 2. El anillo de foco va SIEMPRE con --foco-salto (3px de offset). El rosa sobre el verde del boton da 1.54: pegado al borde no se ve. Tiene que caer sobre el crudo. 3. Hay DOS lineas y no son intercambiables. --linea-suave (1.25) separa tarjetas; --linea-control (3.76) es el borde de un input. Un input con --linea-suave no llega al minimo grafico de 3.0 y la clienta no ve donde escribir. 4. --texto-3 (#6E6458) es el limite. Da 4.82 sobre superficie, que es el piso. Cualquier gris mas claro deja de ser color de texto: #7A6F62 parece que pasa (4.54 sobre crudo) pero da 4.08 sobre tarjeta, y ahi ya falla. 5. No hay sombras. Las piezas se imprimen y se mandan por WhatsApp: una sombra se ve sucia impresa y pesa en 3G. La elevacion sale de --superficie y --linea-suave. 6. Un solo bloque en --accion por seccion. Si todo esta en verde, nada se destaca. 7. El acento rosa es una nota, no un tema. Una pieza sin rosa sigue siendo Flor de Loto. Una pieza sin verde, no. 8. Sobre --accion el texto va en --sobre-accion (crudo), no blanco. Los dos pasan, pero el blanco corta el calor de la marca. 9. --alerta y --error se corrigieron el 2026-09-18 respecto del brand_identity: #B45309 da 4.18 sobre tarjeta y #C0392B da 4.52, o sea al borde. Pasan a #9A4708 (5.33) y #B03325 (5.22). 10. El movimiento se apaga entero con prefers-reduced-motion. Prohibido: parallax, scroll-jacking, contadores animados, cascadas largas, cualquier cosa de mas de 500ms. 11. Sobre el verde NO se baja la opacidad a ojo. La escala invertida tiene tres niveles y un piso: el crudo al 65% da 4.54 y es EL LIMITE. Al 60% ya da 4.10 y deja de ser color de texto. El sitio tenia un borde de circulo al 40% (2.72), por debajo del minimo grafico de 3.0 — para eso esta --linea-sobre-accion (3.71). ============================================================ */ /* ============================================================ APLICACION DE LAS SUPERFICIES DEL NAVEGADOR Va aca y una sola vez. Antes esto estaba repetido a mano: el foco siete veces en sistema.html, tabular-nums cinco, y el salto del subrayado escrito como "3px" en el sitio. Un valor en N lugares es la deuda que este archivo existe para evitar. ============================================================ */ ::selection{ background: var(--seleccion-fondo); color: var(--seleccion-texto); } :where(input, textarea, select, [contenteditable]){ caret-color: var(--cursor); } :focus-visible{ outline: var(--foco-ancho) solid var(--foco); outline-offset: var(--foco-salto); } a{ text-underline-offset: var(--subrayado-salto); } /* Precio, duracion y cualquier cifra en columna. Sin esto los numeros bailan de fila en fila, y el precio es lo que cierra la venta. */ .cifra, .precio, .dato, td.num, th.num{ font-variant-numeric: tabular-nums; } /* Scrollbar: se deja el del sistema. Es una decision, no un olvido — el sitio se ve casi siempre en celular, donde no hay barra visible. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } @media print{ :root{ --fondo:#FFFFFF; --superficie:#FFFFFF; --accion:#000000; --accion-hover:#000000; --enlace:#000000; --linea-suave:rgba(0,0,0,.2); --linea-control:#000000; } }