/* =========================================================== Circular · Economía Circular Colaborativa · RAMCC Tokens de diseño — tema claro único, base blanca Contrastes verificados contra WCAG 2.1 (4.5:1 texto · 3:1 objetos gráficos) =========================================================== */ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300..900;1,300..900&family=Roboto+Mono:wght@400;500;600&display=swap"); :root{ color-scheme:light; /* superficies · marco neutro: el color se reserva para el dato */ --paper:#FFFFFF; --surface:#FFFFFF; --bg:#FFFFFF; --sunk:#EDEFF0; --surface-2:#EDEFF0; /* El borde se oscureció. El sistema dice que la separación la hace el borde y no un salto de tono —y eso sigue en pie—, pero el que estaba elegido daba 1,28:1 contra el papel: casi invisible. O sea que la regla era correcta y el valor la desmentía; la página se veía plana porque nada la dividía de verdad. Ahora --line da 1,77:1 y --hair 1,42:1, que se ven sin pesar. */ --raised:#FAFBFB; --line:#BCC4C7; --line-2:#D4D9DB; --hair:#D4D9DB; /* texto */ --ink:#16211D; --body:#3D4844; --muted:#5C6863; --faint:#5C6863; /* barra y superficies institucionales · ahora claras */ --nav:#FFFFFF; --nav-ink:#16211D; --nav-soft:#5C6863; --nav-line:#E1E4E5; /* acción · texto (AA sobre los cuatro fondos) */ --tengo:#2B7031; --necesito:#8F6100; --ayudar:#177570; --comparto:#5E3EA6; /* acción · relleno (3:1 sobre la tierra del mapa) */ --tengo-fill:#369141; --necesito-fill:#A87200; --ayudar-fill:#1D8E89; --comparto-fill:#6A46B8; /* acción · fondo de etiqueta */ --tengo-bg:#E6F3E7; --necesito-bg:#FAF0DA; --ayudar-bg:#DEF0EF; --comparto-bg:#EDE8F9; /* marca */ /* La cinta de las cinco acciones. Es LA FIRMA del proyecto y ahora es un token porque se usa en dos lugares —abre la página arriba y la cierra en el pie—, y una firma escrita dos veces se despega sola: ya pasó con los colores del mapa, donde el token decía un valor y el script otro. */ /* El alto también es token: la cinta está en tres lugares —arriba de la página, en el pie y en el encabezado de los correos— y un número repetido tres veces se despega, que es exactamente lo que ya pasó con el gradiente. Pasó de 10 a 14 px: a 10 se leía como un filete y no como una firma. */ --cinta-alto:14px; --cinta:linear-gradient(90deg,#369141 0 20%,#A87200 20% 40%,#1D8E89 40% 60%,#6A46B8 60% 80%,#C2306D 80% 100%); --ramcc:#43702B; --ramcc-fill:#6AAB44; --ramcc-green:#6AAB44; --ramcc-bg:#E9F2E4; --lime:#A3F27C; --stop:#A33326; --stop-fill:#B3382B; --stop-bg:#FAE9E6; --money:#8F6100; --money-bg:#FAF0DA; /* acción 5 · Vendo. El espacio de matices está lleno: en daltonismo choca con los otros cuatro, así que SIEMPRE va con la etiqueta de precio. */ --vende:#B02A62; --vende-fill:#C2306D; --vende-bg:#FBE7EF; /* mapa · EXCEPCIÓN DECLARADA a «el verde es tinta, no superficie» La tierra del mapa se tiñe de verde claro. Es lo único del sistema que rompe esa regla y está decidido a propósito: el mapa del hero con la tierra gris se leía plano y sin identidad, y es la pieza que tiene que dar ganas de entrar. Vale SOLO para la tierra del mapa —no para paneles, tarjetas, secciones ni fondos de bloque, donde la regla sigue entera—. Ver manual de identidad §6. */ --land:#E7F0E1; --land-line:#A9BCA0; --grid:#E4E8E5; /* tipografía */ --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Escala tipográfica. Ocho peldaños y no entra un noveno: antes había 34 tamaños sueltos —12, 12,2, 12,3, 12,4, 12,5, 12,8…— que son décimas que nadie puede sostener, y por eso nada se veía decidido. Quien necesite un tamaño nuevo cambia un peldaño, no agrega uno. TODA LA ESCALA SUBIÓ UN ESCALÓN. La anterior se fijó mirando el diseño en una ventana chica; en un monitor ancho —que es donde se abre esto— el texto se leía apretado y menor de lo que pide una página que hay que leer entera. El manual de identidad §9 se actualizó con estos valores en la misma pasada: la tabla de allá y esta lista son lo mismo, y si se despegan gana el manual. */ --t-badge:13px; /* badge/estado · manual §9 */ --t-meta:14px; /* ayuda/metadato · manual §9 */ --t-base:17px; /* texto corriente· manual §9 */ --t-lede:19px; /* párrafo de entrada */ --t-h3:21px; /* título de tarjeta o panel · manual §9 */ --t-bajada:24px; /* bajada del hero */ --t-h2:30px; /* título de sección · manual §9 */ --t-h1:46px; /* título de página · manual §9 */ /* La cifra de portada queda fuera de la escala de texto a propósito: es un número para mirar, no para leer, y se compone en monoespaciada. Subió de 30 a 40 px: a 30 competía de igual a igual con el texto de al lado y la banda se leía como cuatro párrafos cortos en vez de cuatro cifras. El color NO puede aclararse para dar vida: --ramcc-fill sobre la banda da 2,42:1 y --lime 1,17:1, que no pasan ni el mínimo de objeto gráfico. El único verde que llega es --ramcc, 5,07:1. */ --t-cifra:40px; --focus:#177570; /* elevación */ --sh:none; --sh-soft:none; --shadow-soft:none; --sh-panel:0 12px 34px rgba(20,33,29,.13); --shadow-panel:0 12px 34px rgba(20,33,29,.13); } /* ---------- Cinta de acciones ---------- Arriba de todo, los cinco colores de acción en quintos iguales. Es la firma del proyecto, no la de la Red: el isotipo RAMCC ya está en el encabezado y repetirlo acá no agregaba nada. Única excepción a "el color se reserva para el dato": está fuera del contenido y el reparto es igual, que es lo que dentro nunca puede pasar. El pie la repite abajo con el mismo token: la firma abre y cierra. */ body::before{content:"";display:block;height:var(--cinta-alto);background:var(--cinta)} /* ---------- Base ---------- LA PÁGINA ES BLANCA y la separación la hace el BORDE, no un salto de tono. El gris #F4F5F6 que hacía de fondo se sacó: contra el papel blanco daba 1.05:1, o sea que nunca separó nada por sí solo — lo que separaba era el borde. Con base blanca las sombras se apagan: sobre blanco una sombra suave no levanta, ensucia. --sunk queda como único tono de apoyo, para lo que tiene que hundirse (chips, encabezados de tabla, bandas de portada). */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans); font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance} a{color:var(--ayudar)} code,.mono{font-family:var(--mono)} /* Micro-etiqueta: Nunito Sans 700 en versalitas, nunca monoespaciada */ .eyebrow{font-size:var(--t-badge);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} /* La monoespaciada se reserva para cifras, códigos y coordenadas */ .num,.cod{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---------- Superficies ---------- Sin sombra: el borde hace todo el trabajo. La única sombra que queda es --sh-panel, para el panel que flota por encima del contenido. --sunk es el único tono de apoyo y se reserva para lo que tiene que HUNDIRSE dentro de un bloque: chips, encabezados de tabla, franjas de conclusión. Nunca para una portada ni para una sección entera. */ .card{background:var(--surface);border:1px solid var(--line);border-radius:12px} .panel{background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--sh-panel)} /* ---------- El verde no es superficie ---------- Ningún bloque se rellena de verde: el verde es TINTA —texto, borde, punto, barra—. Un rectángulo verde es una superficie con color, y eso contradice la regla de arriba. El estado activo se marca con CONTORNO. Única excepción: el botón primario, donde el relleno es la afordancia. */ .activo{background:var(--paper);border:1.5px solid var(--ramcc);color:var(--ramcc); font-weight:700} .nav-activo{background:transparent;color:var(--ramcc);font-weight:700; box-shadow:inset 0 -2px 0 var(--ramcc-fill)} .aviso{background:var(--paper);border:1px solid var(--line); border-left:3px solid var(--ramcc-fill);border-radius:8px;padding:11px 13px} /* El texto es BLANCO y no el verde oscuro que decía antes: medido, #062E12 sobre --tengo da 2,46:1 y el mínimo del proyecto es 4,5 (manual §14). Nunca se notó porque esta clase estaba definida y sin usar en ninguna vista. Con blanco da 6,06:1. */ .btn-primario{background:var(--tengo);border:1px solid var(--tengo);color:#fff; font-weight:700} .btn-primario:hover,.btn-primario:focus-visible{background:var(--ink);border-color:var(--ink)} /* Pastilla de estado: contorno del color, nunca fondo teñido. El color distingue el estado; el fondo es siempre papel. */ .pastilla{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-badge);font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px; background:var(--paper);border:1.5px solid currentColor;white-space:nowrap} /* ---------- Foco visible ---------- */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px} /* ---------- Doble codificación ---------- forma = tipo de actor · color = tipo de acción municipio círculo consorcio hexágono hueco (no publica: es estructura) cooperativa cuadrado Las empresas NO se mapean: viven en el Banco de empresas. ------------------------------------------ Cinco acciones y no entra una sexta: medido en daltonismo, con cuatro el peor par se separa a ΔE 20 y con la quinta cae a 9,9. Por eso Vendo lleva SIEMPRE su etiqueta de precio además del color. */ .a-tengo {color:var(--tengo); background:var(--tengo-bg)} .a-necesito{color:var(--necesito);background:var(--necesito-bg)} .a-ayudar {color:var(--ayudar); background:var(--ayudar-bg)} .a-comparto{color:var(--comparto);background:var(--comparto-bg)} .a-vende {color:var(--vende); background:var(--vende-bg)} /* Relleno de nodos (gráficos, ≥3:1) — distinto del color de texto (≥4.5:1) */ .n-tengo {fill:var(--tengo-fill)} .n-necesito{fill:var(--necesito-fill)} .n-ayudar {fill:var(--ayudar-fill)} .n-comparto{fill:var(--comparto-fill)} .n-vende {fill:var(--vende-fill)}