/* ========================================================================= Clases Cerca — brand.css (marca `sports` del molde B) Dirección de marca: "Rótulo de barrio". La fachada pintada a mano de la academia de la esquina: letra ancha y pesada, alto contraste, cero degradados. Kit completo en `docs`/handoff (BRAND.md). Tres colores y nada más: tinta, nopal, cempasúchil. ───────────────────────────────────────────────────────────────────────── CÓMO GANA ESTE ARCHIVO (leer antes de añadir una regla) ───────────────────────────────────────────────────────────────────────── Astro inyecta los de su CSS empaquetado al FINAL del , o sea DESPUÉS del de este archivo. Como el orden en la cascada sólo decide entre declaraciones de la MISMA especificidad, un `:root { --brand: … }` aquí perdería contra el `:root { --brand: … }` de design-system.css, que llega después. Por eso todo lo de aquí lleva especificidad subida a mano: :root:root (0,2,0) → gana a `:root` del design system :root:root .clase (0,3,0) → gana a `.clase[data-astro-cid-…]` de un componente, que es (0,2,0) 5 y 7 × :root + body …(0,5,1) y (0,7,1) → ganan a los `!important` de tipografía del design system; el número sale de medir, ver el bloque TIPOGRAFÍA No es cosmético: quitar una repetición de `:root` desactiva la regla en silencio. Si algún día el se mueve al final del , esto sobra — pero seguirá siendo correcto. ───────────────────────────────────────────────────────────────────────── REGLA DE COLOR heredada del design system: TODO en sRGB (hex, rgb(), color-mix(in srgb, …)). Nada de oklch()/lab()/color(display-p3 …). Mezclar espacios hace que la página se mueva al arrastrarla entre monitores, y color-mix(in oklch, , white) pinta rosa en Chrome. REGLAS DEL KIT que este archivo hace cumplir: - Cempasúchil (#f0a31c) NUNCA es color de texto. Sólo fondo, con texto tinta. - Sin degradados, sin glow, sin sombras de color: la única sombra permitida es 0 1px 2px rgb(22 33 28 / .08). - Radio de esquina 3 px en todo. ========================================================================= */ :root:root { /* --- Paleta de marca -------------------------------------------------- Nopal es el color de acción: contactar, WhatsApp, entrar. 5.4:1 sobre cal. */ --brand: #1e6b44; --brand-dark: #175537; /* hover del primario */ --brand-soft: #c6dfd2; /* primary-100 del kit: bordes y rellenos tenues */ --brand-tint: #e4efe9; /* primary-50: el lavado más claro */ /* Cempasúchil. No existe en el design system de LPE porque LPE no tiene un segundo color de marca; aquí sí, y por eso el token es nuevo. Se usa como FONDO (badge "Verificado", botón de la banda del footer, arco interior del símbolo) y el texto encima siempre es tinta: 9.6:1. */ --brand-accent: #f0a31c; --brand-accent-soft: #fdf0d8; --brand-accent-strong: #b87a0c; --on-accent: #16211c; /* --- Neutros ---------------------------------------------------------- Gris tibio, sin una gota de azul. El "negro" es tinta. */ --bp-black: #16211c; --bp-white: #ffffff; --bp-gray-100: #efede6; --bp-gray-200: #cfcbbd; --bp-gray-300: #b3b0a3; --bp-gray-400: #94978d; --bp-gray-600: #54605a; --bp-gray-800: #26312c; /* --- Texto ------------------------------------------------------------ */ --text-main: #16211c; /* tinta, 15.4:1 sobre cal */ --text-support: #3a4741; --text-muted: #54605a; --text-on-brand: #faf9f6; /* cal sobre nopal, no blanco puro */ /* --- Superficies ------------------------------------------------------ Cal es el suelo, blanco es lo que se apoya encima. Al revés que en LPE, donde el lienzo es blanco puro: aquí la cal es el papel del rótulo y las tarjetas se levantan de él en blanco. */ --surface-page: #faf9f6; --surface-paper: #ffffff; --surface-warm: #ffffff; --surface-soft: #efede6; /* La barra de navegación es cal, igual que el lienzo, y lo que la separa es el filete de 1.5 px de tinta que se pinta más abajo — no un cambio de fondo. Es literalmente cómo se separa un rótulo de su pared. */ --surface-header: #faf9f6; --surface-dark: #16211c; /* tinta: el footer */ /* --- Texto sobre tinta ------------------------------------------------ `--on-dark-accent` NO es cempasúchil aunque sea "el acento": en LPE este token colorea texto y enlaces del footer, y el kit prohíbe cempasúchil como color de texto. Va un nopal claro. El cempasúchil aparece en el footer sólo como relleno: el arco exterior del símbolo y el botón de la banda. El valor era `#3e9468`, el "primario de modo oscuro" que BRAND.md §1 anota como 4.9:1 sobre tinta. Ese 4.9 no sale: medido con la fórmula de WCAG (luminancia relativa sRGB, (L1+0.05)/(L2+0.05)) contra el ÚNICO fondo sobre el que este token se pinta de verdad —`--surface-dark` #16211c, el fondo del footer— da 4.45:1, por debajo del 4.5:1 que AA pide para texto normal, y el token se usa precisamente en texto normal: el enlace de correo, los enlaces destacados de columna y la cursiva del lockup. Fallaba por dos centésimas, que es la peor forma de fallar: nadie lo nota a ojo y cualquier auditoría lo marca. Ahora vale `#4fa87a`, que sobre esa misma tinta mide 5.69:1. Se sube la luminosidad y se deja el tono donde estaba (sigue siendo nopal, no un verde nuevo): el margen extra es para el objetivo real del kit §0.5 —Android barato bajo el sol—, no para presumir el número. Este token es SÓLO para sobre tinta. Sobre cal cae a 2.76:1 y no se puede usar; ahí el verde de texto es `--brand` (#1e6b44, 5.4:1). El caso que queda corto no es de este archivo: `.tools-label` del footer pinta `color-mix(in srgb, var(--on-dark-accent) 78%, var(--surface-dark))`, que con este valor resuelve a #428a65 → 3.99:1, suficiente para texto grande pero no para sus 0.78rem en negrita. Se arregla en el componente (subir el porcentaje de la mezcla), no aclarando más este token, porque aclararlo rompería el escalón contra `--on-dark-main`. */ --on-dark-main: #faf9f6; --on-dark-accent: #4fa87a; --on-dark-muted: #9baaa2; /* --- Semánticos ------------------------------------------------------- Éxito es el propio nopal: en este directorio "listo" y "contactar" son el mismo verde a propósito, porque no hay un tercer color que gastar. */ --status-success: #1e6b44; --status-success-strong: #175537; --status-success-soft: #e4efe9; --status-success-bright: #3e9468; /* para puntos y píldoras sobre tinta */ /* Ladrillo. El paso `strong` es el mismo tono bajado en luminosidad para texto sobre el fondo tenue; el kit da el par principal y el fondo. */ --status-danger: #b23a20; --status-danger-strong: #7d2916; --status-danger-soft: #f7e5e0; --status-info: #3a4741; --status-info-soft: #efede6; /* Advertencia = cempasúchil. No existe como token en design-system.css (LPE nunca lo necesitó); se declara aquí porque el kit sí lo define, y para que el día que el molde lo use no se invente un cuarto amarillo. */ --status-warning: #f0a31c; --status-warning-soft: #fdf0d8; /* --- WhatsApp --------------------------------------------------------- En LPE este token es el verde de WhatsApp a propósito, para que el botón se reconozca. El kit lo prohíbe (regla 9): el botón lleva color propio — nopal — y la palabra "WhatsApp", sin el verde ni el logotipo ajenos. */ --brand-whatsapp: #1e6b44; --brand-whatsapp-dark: #175537; /* --- Filetes y lavados de sección ------------------------------------- En LPE son rgba de la terracota. Aquí son tinta: el sistema separa por línea, no por color. */ --section-border: rgba(22, 33, 28, 0.16); --section-border-soft: rgba(22, 33, 28, 0.1); --section-accent-wash: rgba(30, 107, 68, 0.055); /* --- Radios ----------------------------------------------------------- 3 px en todo (kit §0.3). `--radius-pill` se queda en 999 px porque el propio theme.css del kit lo mantiene: es la forma de la píldora de rating y del avatar, no una esquina redondeada. */ --radius-sm: 3px; --radius-button: 3px; --radius-md: 3px; --radius-pill: 999px; /* --- Tipografía: familias -------------------------------------------- Los tokens no existen en design-system.css (LPE escribe las familias a mano en 40 reglas). Se declaran aquí para que las sobrescrituras de abajo tengan un único sitio donde cambiar la fuente. */ --font-display: "Archivo", "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* --- Tipografía: escala ---------------------------------------------- El titular del kit es bastante más pequeño que el de LPE (2 rem móvil / 2.75 rem escritorio contra 2.2/4.35): el rótulo gana peso por ancho y por versales, no por tamaño. */ --hero-display-size: clamp(2rem, 4.4vw, 2.75rem); --hero-display-size-mobile: clamp(1.85rem, 8.5vw, 2rem); --hero-tool-size: clamp(2rem, 4.2vw, 2.6rem); --hero-tool-size-mobile: clamp(1.8rem, 8vw, 2rem); --hero-util-size: clamp(2rem, 4.2vw, 2.6rem); --hero-util-size-mobile: clamp(1.8rem, 8vw, 2rem); --hero-article-size: clamp(2rem, 4.2vw, 2.6rem); --hero-article-size-mobile: clamp(1.8rem, 8vw, 2rem); --hero-line-height: 0.95; --hero-letter-spacing: -0.015em; --body-size: 1.0625rem; --body-line: 1.6; --type-body-copy: 1.0625rem; } @media (min-width: 768px) { :root:root { --body-size: 1.125rem; --type-body-copy: 1.125rem; } } /* ========================================================================= TIPOGRAFÍA — remapeo de familias design-system.css escribe "Bricolage Grotesque" y "Literata" a mano en 40 reglas, muchas con !important, y Layout.astro repite las dos familias en su