/* TOKENS DE MARCA — MochiStudio ------------------------------------------------------------ Valores extraídos exactamente del template validado en Claude Design (colores, opacidades, tamaños). El tema día/noche se controla con data-theme="dia" / "noche" en . Nunca fijar estos colores con estilos inline — siempre a través de var(--nombre-token) en CSS, o se rompe el cambio de tema. */ :root { --color-menta: #B4F6A3; --color-morado: #932BF1; --color-naranja: #FF6B35; --color-tinta: #0D0D0D; --color-blanco: #FFFFFF; /* Canales RGB de los dos colores de marca que se invierten entre modos. Existen sólo para poder escribir rgba() con opacidad variable en la trama del hero. NO son colores nuevos: son --color-morado y --color-menta descompuestos. Si cambia el hex, cambiar también estos tres números. */ --color-morado-rgb: 147, 43, 241; --color-menta-rgb: 180, 246, 163; --color-fondo-productos-dia: #F4FDEF; --color-fondo-productos-noche: #2E1348; --color-tarjeta-servicios-noche: #4C1A7A; --color-footer-dia: #EAFBE0; --color-footer-noche: #241038; --font-marca: "Sora", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --tracking-eyebrow: 0.3em; --tracking-cta: 0.02em; /* ESCALA TIPOGRÁFICA — CERRADA (17/08/2026) ------------------------------------------------------------ Base real 16px vía html{font-size:100%}, en rem. Antes no existía un "cuerpo base" — ningún texto de lectura tocaba 16px, todo el sistema partía ya un escalón por encima (18px el más pequeño de los "grandes"), y había 8 tamaños distintos de título/subtítulo sin relación entre sí (46/34/32/30/27px). Ratio Perfect Fourth (1.333) recortado a 6 escalones — no los ~13 pasos de una escala matemática completa. Perfect Fourth porque la marca ya busca contraste alto y deliberado entre titular y cuerpo (hero, fichas destacadas); Minor Third habría sido demasiado conservador para ese papel. Se recorta a 6 pasos porque más escalones sin uso real solo añaden tamaños que nadie pediría — la escala sirve a los componentes que existen, no al revés. Un solo cuerpo de lectura (1.125rem/18px) sustituye a los tres casi-iguales que había antes (17/18/19px repartidos sin criterio entre .kit__texto, .solucion__texto, .tarjeta__descripcion). Investigación previa a esta decisión: guías de 2026 coinciden en 16px como suelo universal de body text (con 17-18px como zona de confort en desktop), rem/em para respetar el zoom del navegador (WCAG 2.1, resize hasta 200%), y escalas de 5-7 pasos como rango práctico para un sitio de este tamaño. Precio (.precio__valor) queda en el paso 4 (30px) en vez del paso exacto de escala (28px) — ajuste manual, no matemático: es el dato de mayor peso para conversión de la página y en pantalla pesaba poco al escalón puro. Documentado aquí para que quede claro que es una excepción consciente, no un error de cálculo. */ --texto-base: 1rem; /* 16px — suelo real, antes no existía */ --texto-cuerpo: 1.125rem; /* 18px — único cuerpo de lectura grande */ --texto-sub: 1.333rem; /* ≈21px — subtítulos, cierres, descripciones */ --texto-problema: 1.75rem; /* 28px — frase-problema de ficha */ --texto-precio: 1.875rem; /* 30px — ajuste manual, ver nota arriba */ --texto-h3: 1.5rem; /* 24px — proceso, comparativa, kit */ --texto-h2: 2.375rem; /* 38px — título de ficha/tarjeta, techo del sistema salvo el hero */ /* TRAMA DE PUNTOS DEL HERO — geometría. El color y la opacidad van por modo, más abajo. Paso de 14px con puntos de 1,4 / 0,9px de radio: se lee como textura de pantalla, no como patrón decorativo. Si se sube el paso los puntos empiezan a contarse de uno en uno; si se baja, la malla se cierra y vira a fondo plano teñido. */ --trama-paso: 14px; --trama-punto-mayor: 1.4px; --trama-punto-menor: 0.9px; /* TOGGLE — UNIFICADO EN TODO EL SITIO (16/08/2026, tarde). Antes el toggle del hero medía 64×36 desktop / 56×32 móvil (calibración cerrada en sesión previa) y la barra sticky usaba un tamaño reducido aparte (48×27 / 44×24) solo para su contexto más fino. Decisión nueva de Erika: unificar ambos al tamaño de la barra sticky en TODO el sitio — el toggle del hero se veía grande, sobre todo ahora que convive con el menú y el CTA "Cuéntanos" en la misma fila. Esto SUSTITUYE la calibración anterior, no la complementa. El override local en barra-sticky.css (.barra-sticky .toggle) queda ahora redundante — mismo valor final, doble declaración — pero no rompe nada; se puede limpiar en otra sesión. Proporciones del sistema (sin cambios): ancho = 1,8 × alto, knob = 0,83 × alto. Suelo duro: knob 20px — el móvil (24px) tiene margen de sobra sobre ese mínimo del manual, no lo toca. */ --toggle-w-desktop: 48px; --toggle-h-desktop: 27px; --toggle-knob-desktop: 22px; --toggle-w-movil: 44px; --toggle-h-movil: 24px; --toggle-knob-movil: 20px; --toggle-transicion: 0.34s cubic-bezier(0.4, 1.15, 0.5, 1); } :root, html[data-theme="dia"] { --color-fondo-hero: var(--color-menta); --color-simbolo: var(--color-naranja); --color-wordmark: var(--color-morado); --color-fondo-productos: var(--color-fondo-productos-dia); --color-tarjeta-servicios: var(--color-blanco); --color-fondo-footer: var(--color-footer-dia); --color-texto-principal: #14310B; --color-toggle-pill: var(--color-morado); /* Trama: morado sobre menta. Calibrado en pantalla al punto exacto en que se duda de si está — condición dura: si se nota, está mal. Es MÁS BAJO que el de noche: el menta claro es un fondo silencioso y cualquier punto morado salta antes. */ --trama-rgb: var(--color-morado-rgb); --trama-opacidad: 0.03; } html[data-theme="noche"] { --color-fondo-hero: var(--color-morado); --color-simbolo: var(--color-naranja); --color-wordmark: var(--color-menta); --color-fondo-productos: var(--color-fondo-productos-noche); --color-tarjeta-servicios: var(--color-tarjeta-servicios-noche); --color-fondo-footer: var(--color-footer-noche); --color-texto-principal: var(--color-blanco); --color-toggle-pill: var(--color-menta); /* Trama: menta sobre morado. Valor propio, NO el mismo que el día. Aguanta más opacidad porque el morado saturado tiene mucho más peso visual y la trama compite contra él en vez de destacar sobre un fondo silencioso. Los dos modos se calibran por separado. */ --trama-rgb: var(--color-menta-rgb); --trama-opacidad: 0.05; }