/* ========================================================================== PALETA — Omar Fraija Fuente unica de color de todo el sitio. Ninguna otra hoja declara un color literal: todas consumen las variables de rol de la CAPA 2. PARA CAMBIAR EL COLOR DEL SITIO SOLO SE TOCA LA CAPA 1. Los roles de la CAPA 2 se recalculan solos porque apuntan a la CAPA 1. -------------------------------------------------------------------------- POR QUE ESTOS COLORES — medido en los sitios de referencia del nicho (agosto 2026, recorriendo el DOM y sumando area real de pixel): Greg Finck fondo #faf8f5 texto #292929 Sposto fondo #f7f7f5 texto #2e2e2e Nirav Patel fondo #fffbf2 texto #3c3129 acento #bfb7a4 KT Merry fondo #ffffff 2a superficie #f9f7f4 acento #687a7b Tatiana Braoun fondo #ffffff texto #000000 acento #435b45 Jose Villa fondo #ffffff texto #161616 India Earl fondo #000000 / #ffffff acento #484841 SEGUNDA MEDICION (septiembre 2026), mismo metodo, mirando ADEMAS que distancia hay entre la 1a y la 2a superficie clara — que era donde fallabamos: KT Merry #ffffff L100% -> #f9f7f4 L97% 3 puntos Greg Finck #faf8f5 L97% -> (no tiene 2a) Nirav Patel #fffbf2 L97% -> #fbf6ec L95% 2 puntos Tonic Site Shop #ffffff L100% -> #f1f0ef L94% 6 puntos NOSOTROS antes #f7f5f0 L95% -> #eae4d7 L88% 7 puntos Y tres cosas mas que salieron de esa medicion: 4. EL OSCURO PLANO CASI NO EXISTE. Tres de los cuatro no tienen ni un bloque de color oscuro plano. El unico que lo tiene (KT Merry) lo hace en S0%, gris neutro, no en marron. Cuando hay oscuro suele ser un VELO sobre fotografia: Greg Finck usa rgba(41,41,41,0.5) encima de la foto. 5. EL PASTEL EXISTE Y OCUPA EL 0.1% DEL AREA. El #f0e6d4 de KT Merry (S48%, pastel de verdad) no llega al 0.1% de la pagina; el #d6c8ad de Tonic, igual. El pastel va de acento, nunca de superficie. 6. SATURACION ALTA + LUMINOSIDAD EXTREMA. La crema de Nirav Patel es S100% y no se ve chillona porque va a L97%. Lo que abarata un pastel no es la saturacion: es quedarse por debajo de L94%. Tres conclusiones, y las tres estan en esta paleta: 1. EL FONDO NO ES BLANCO PURO en 4 de los 7. Es un casi-blanco calido entre L95% y L97%. Nuestro --p-fondo (L95%) esta en ese rango. 2. EL TEXTO NUNCA ES GRIS MEDIO. Es casi negro: L9% a L20%. Ninguno usa un #555 o un #777. Nuestro --p-tinta va a L16%. 3. EL ACENTO, CUANDO LO HAY, ES UN VERDE APAGADO (S 5-15%) o un topo calido. Ni dorados ni azules. Nuestro --p-verde es S15%, y cae a dos grados de matiz del de Tatiana Braoun (#435b45), que era la referencia de partida. ========================================================================== */ :root { /* ======================================================================== CAPA 1 — LA PALETA. Cuatro colores. Es lo unico que se toca. Repartidos 60-30-10: en un sitio de fotografia el color lo ponen las fotos y la interfaz se aparta. ====================================================================== */ /* 60% — el fondo de toda la pagina. NO es blanco: es un crema calido. H43 S45% L98%. Subio de L95% a L98% el 2026-09-01. Medido en cuatro referentes recorriendo su DOM: KT Merry #ffffff L100%, Greg Finck #faf8f5 L97%, Nirav Patel #fffbf2 L97%, Tonic #ffffff. Ninguno baja de L97% en el fondo. La saturacion SUBE (30->45) a proposito: Nirav Patel lleva su crema a S100% y no se ve chillon porque la luminosidad es extrema. El enemigo del pastel no es la saturacion, es la luz por debajo de L94%. */ --p-fondo: #fcfbf8; /* 30% — superficies que se levantan del fondo: tarjetas, bandas. Mismo matiz y saturacion que el fondo, solo un punto mas baja (H41 S40% L95%). Subio de L88% a L95% el 2026-09-01, y es EL cambio importante. Medido: los referentes separan sus dos superficies claras 2, 3 y 6 puntos de luminosidad (KT Merry L100->L97, Nirav L97->L95, Tonic L100->L94). Nosotros las separabamos SIETE, mas que ninguno, y por eso cada banda se leia como una raya gris en vez de como un cambio de aire — Jairo: "parece la pagina una serpiente". Ahora la distancia es 1.06, exactamente la de KT Merry. */ --p-superficie: #f7f4ed; /* 10% — el acento. Todo lo que hay que pulsar, y nada mas. H145 S15% L34%. */ --p-verde: #4a6455; /* El texto. Es tinta, no paleta: no cuenta en el reparto. H40 S7% L16%. */ --p-tinta: #2c2a26; /* ======================================================================== CAPA 1b — DERIVADOS. No son colores nuevos: son los cuatro de arriba en otra luminosidad, conservando matiz y saturacion. OJO: NO se recalculan solos. Si cambias la CAPA 1, estos se quedan con el valor viejo. Para sacar los nuevos y comprobar el contraste de golpe: node .claude/recalcular-paleta.js "#fondo" "#superficie" "#acento" "#tinta" (Se probo hacerlo automatico con color-mix() y no vale: mezclar en sRGB desatura hacia el gris y los valores se iban hasta dE 9.9 del actual, que ya es otro color. Por eso van a mano y existe el script.) ====================================================================== */ /* La tinta con menos peso, para metadatos y notas. No es un quinto color. */ --p-tinta-suave: #635e54; /* H40 S8% L36% */ /* La tinta clara, para metadatos SOBRE fondo oscuro. */ --p-tinta-tenue: #a8a39a; /* H39 S7% L63% */ /* El verde aclarado hasta que se lee sobre la tinta: el verde de la paleta se queda en 2.21 sobre fondo oscuro y alli no vale. */ --p-verde-claro: #8daf9b; /* H145 S18% L62% */ /* El verde oscurecido, para el hover del CTA. */ --p-verde-hondo: #3a5043; /* H145 S16% L27% */ /* El verde en clarito, tercera superficie (tarjeta 3 de precios). Sube a L95% con la superficie: si se quedara en L88% seria ella la raya gris. Las tres tarjetas se siguen distinguiendo por MATIZ, que es la regla de la CAPA 3, no por luminosidad. */ --p-verde-palido: #eef6f2; /* H147 S30% L95% */ /* Linea sobre fondo oscuro. Va en la familia del oscuro (H145), no en la de la tinta: una linea calida sobre una superficie verde se ve sucia. */ --p-linea-oscura: #39463f; /* H145 S10% L25% */ /* EL OSCURO DEL SITIO. No es --p-tinta: Jairo lo veia "muy cafe oscuro". Dos cambios sobre el, medidos: sube de L16% a L20% (el tope al que el texto tenue sigue cumpliendo AA; por encima hay que aclararlo tanto que deja de ser tenue) y gira del H40 neutro al H145 de la paleta, para que emparente con el verde en vez de leerse como tinta pegada encima del crema. dE76 = 7.8 respecto al anterior. */ --p-verde-nocturno: #2e3832; /* H145 S10% L20% */ /* Los mismos dos colores en componentes sueltos, para poder escribir rgba(var(--p-tinta-rgb), 0.55). Sin esto los velos y las lineas translucidas se quedarian con el color viejo al cambiar la CAPA 1. SI SE CAMBIA --p-tinta O --p-fondo HAY QUE CAMBIAR ESTOS TAMBIEN. */ --p-tinta-rgb: 44, 42, 38; /* El oscuro en componentes: los velos que van SOBRE fotografia dentro de un bloque oscuro tienen que tintar en el mismo color que el bloque, o la foto sale marron dentro de una seccion verde. */ --p-oscuro-rgb: 46, 56, 50; --p-fondo-rgb: 252, 251, 248; /* ======================================================================== CAPA 2 — ROLES. Esto es lo que usan las hojas de estilo. Nunca se escribe un color literal fuera de este archivo. ====================================================================== */ /* --- Fondos y superficies --- */ --fondo: var(--p-fondo); --superficie: var(--p-superficie); --superficie-verde: var(--p-verde-palido); /* UN SOLO OSCURO para todo el sitio: hero, sobre, cierre, menu, pie y la tarjeta destacada de precios. Antes el pie iba por libre y en el home se veia la costura donde el cierre lo tocaba. Este es el unico sitio donde se cambia el oscuro de la web. */ --fondo-oscuro: var(--p-verde-nocturno); --fondo-pie: var(--fondo-oscuro); /* alias: el pie no tiene oscuro propio */ /* --- Texto --- */ --texto: var(--p-tinta); --texto-suave: var(--p-tinta-suave); /* metadatos, pies, notas */ --texto-inverso: var(--p-fondo); /* sobre fondo oscuro o sobre el CTA */ --texto-suave-inverso: var(--p-tinta-tenue); /* metadatos sobre oscuro */ --texto-acento: var(--p-verde); /* rotulos y enlaces sobre fondo claro */ --texto-acento-inverso: var(--p-verde-claro); /* lo mismo sobre oscuro */ /* --- Llamada a la accion. Es el unico bloque de color fuerte del sitio y solo aparece donde hay que actuar. --- */ --cta-fondo: var(--p-verde); --cta-texto: var(--p-fondo); --cta-fondo-hover: var(--p-verde-hondo); /* Boton secundario: sin relleno, solo linea */ --cta-linea: var(--p-verde); /* --- Lineas y velos --- */ --linea: rgba(var(--p-tinta-rgb), 0.14); /* la tinta al 14% sobre fondo claro */ --linea-fuerte: rgba(var(--p-tinta-rgb), 0.35); --linea-inversa: var(--p-linea-oscura); --linea-inversa-tenue: rgba(var(--p-fondo-rgb), 0.14); --velo: rgba(var(--p-oscuro-rgb), 0.55); /* el que oscurece detras del menu */ --velo-foto: rgba(var(--p-oscuro-rgb), 0.35); /* sobre fotografia, para leer encima */ /* --- Sombras. Tinta, nunca negro puro: el negro sobre un fondo calido se ve sucio. --- */ --sombra-corta: 0 2px 8px rgba(var(--p-tinta-rgb), 0.08); --sombra-media: 0 8px 24px rgba(var(--p-tinta-rgb), 0.1); --sombra-larga: 0 20px 48px rgba(var(--p-tinta-rgb), 0.14); /* ======================================================================== CAPA 3 — EXCEPCION DE PRECIOS Las tres colecciones tienen que distinguirse entre si de un vistazo. Se distinguen por MATIZ, no por luminosidad: arena y salvia dan dE2000 = 7.1 entre ellas (por encima de 2 ya se ve a simple vista) aunque su contraste WCAG sea 1.02 — WCAG mide luminancia, no color. Separarlas por luminosidad en vez de por matiz obligaria a bajar la tercera hasta L76%, y alli el texto suave cae a 3.82 y falla AA. La del medio manda: invierte a fondo oscuro. Es la que se vende. ====================================================================== */ /* La primera NO usa --p-superficie: contra el fondo se separaba 1.06 y desaparecia. La tercera se salva por matiz (es verde), pero la primera es del mismo matiz calido que el fondo, asi que su unica salida es la luminosidad. H39 S45% L91%: mismo matiz y saturacion, 4 puntos mas baja. Separacion 1.14 contra --p-fondo. Sobre este tono el texto suave queda en 5.48 y el acento en 5.50, los dos por encima de 4.5. Solo afecta a la tarjeta 1; --p-superficie sigue intacta. */ --pack-1-fondo: #f2ece0; --pack-1-texto: var(--p-tinta); --pack-1-suave: var(--p-tinta-suave); --pack-1-acento: var(--p-verde); --pack-2-fondo: var(--fondo-oscuro); /* la destacada, el mismo oscuro */ --pack-2-texto: var(--p-fondo); --pack-2-suave: var(--p-tinta-tenue); --pack-2-acento: var(--p-verde-claro); /* Mismo caso que --pack-1-fondo: --p-verde-palido se separaba 1.06 del fondo y, una vez que la 1 subio, la 3 era la que se quedaba plana. Baja de L95% a L92% conservando matiz y saturacion (H147 S30%). Separacion 1.13, la misma que la 1. Entre las dos hay 1.00 de luminancia pero matices opuestos (calido / verde), que es como se distinguian ya. Texto suave 5.50, acento 5.52. --p-verde-palido sigue intacta para el resto del sitio. */ --pack-3-fondo: #e4f0e8; --pack-3-texto: var(--p-tinta); --pack-3-suave: var(--p-tinta-suave); --pack-3-acento: var(--p-verde); /* ======================================================================== ALIAS HEREDADOS — bodas.css nombra los colores en su propio idioma a lo largo de 2.100 lineas. En vez de reescribirlas, se apuntan aqui. No usar en codigo nuevo: usar los roles de la CAPA 2. ====================================================================== */ --nata: var(--p-fondo); --arena: var(--p-superficie); --sinu: var(--p-verde); --tinta: var(--p-tinta); --niebla: var(--p-tinta-suave); } /* ========================================================================== CONTRASTE VERIFICADO — WCAG AA pide 4.5:1 en texto normal, 3:1 en grande. Medido sobre cada superficie real del sistema: SOBRE --fondo (#fcfbf8) texto 13.84 · texto-suave 6.23 · texto-acento 6.25 SOBRE --superficie (#f7f4ed) texto 13.04 · texto-suave 5.87 · texto-acento 5.89 SOBRE --superficie-verde (#eef6f2) texto 13.03 · texto-suave 5.86 · texto-acento 5.89 SOBRE --fondo-oscuro (#2e3832) — el unico oscuro del sitio texto-inverso 11.74 · texto-suave-inverso 4.84 · texto-acento-inverso 5.06 SOBRE --cta-fondo (#4a6455) cta-texto 6.25 SOBRE --cta-fondo-hover (#3a5043) cta-texto 8.43 Ni un solo par por debajo de 4.5. El par mas ajustado de todo el sistema es texto-suave-inverso sobre --fondo-oscuro: 4.84. Al tocar la CAPA 1 hay que volver a medir contra --superficie, que es la superficie clara mas oscura: si un color pasa sobre ella, pasa sobre el fondo. CUIDADO CON LA OPACIDAD: rebaja el contraste real. Un texto declarado en --texto-inverso puro pero servido a opacity 0.78 se queda en 4.35 y falla. ========================================================================== */