/* * Fichas del sistema visual APMV. * * Todo lo que se repite en el diseño está aquí y en ningún otro sitio: un color, * una medida o un tamaño que aparezca escrito a mano en otra hoja es un error, * porque el día que cambie habrá que buscarlo. * * ========================================================================= * COLOR * ========================================================================= * * FUENTE MAESTRA: el verde institucional es #40920C, muestreado del logo * ORIGINAL de la APMV. Decisión DP-04, cerrada el 2026-09-01. * * El logo redibujado por LEES usa #409435; esa reproducción NO redefine la * identidad de la Asociación y debe corregirse hacia este valor, no al revés. * Si la APMV entrega un manual de marca con otras especificaciones, esa * evidencia tiene precedencia y se registra como cambio. * * Los verdes derivados conservan el TONO 97° y la SATURACIÓN 85% del maestro. * No son colores nuevos: son el mismo verde a distinta profundidad. * * CONTRASTE (WCAG 2.1, sobre blanco): * #40920C 3,94:1 ← FALLA AA para texto normal. Solo superficies y * titulares grandes (>=24px, o >=19px en negrita) * #2D6809 6,78:1 ✔ texto y enlaces * #1D4205 11,45:1 ✔ superficies sólidas; blanco encima * #E9B200 1,94:1 ← NUNCA texto. Solo filete, subrayado y marca de sección * * La regla práctica: **el dorado no dice nada, subraya**. Si un dato solo se * distingue por ser dorado, ese dato no se distingue. */ :root { /* --- Marca. No se tocan. --- */ --apmv-verde: #40920c; --apmv-dorado: #e9b200; --apmv-blanco: #ffffff; /* --- Derivados de pantalla. Propuesta nuestra. --- */ --apmv-verde-niebla: #f7faf5; --apmv-verde-velo: #eff5ea; --apmv-verde-profundo: #2d6809; --apmv-verde-tinta: #1d4205; --apmv-dorado-profundo: #7a5e00; /* * --- Servicio de terceros. No es color de la APMV. --- * * El verde del botón de WhatsApp. No es el #25D366 de la aplicación: ese * contrasta 1,98:1 contra el papel blanco y deja el glifo y el propio * botón por debajo del 3:1 que pide la WCAG 2.1 para un control * (1.4.11 Contraste de elementos no textuales). Este es el mismo tono * —142°— llevado a una profundidad que sí cumple: 4,71:1. Se sigue * reconociendo, y además convive con el verde institucional. */ --apmv-whatsapp: #17853e; --apmv-whatsapp-hover: #10662f; /* * Geometría del botón flotante. Está aquí porque no la usa solo el * botón: el pie reserva sitio a partir de estas dos medidas, y si se * cambia el tamaño en un lado y no en el otro, el botón se apoya sobre * el crédito. En pantallas estrechas se redefinen, y el hueco del pie * se recalcula solo. */ --apmv-whatsapp-tamano: 3.5rem; --apmv-whatsapp-margen: 1.25rem; /* --- Tintas de texto. --- */ --apmv-grafito: #1a2018; --apmv-gris-lectura: #5a6258; --apmv-gris-filete: #d8ded4; /* --- Papel. --- */ --apmv-papel: #ffffff; --apmv-papel-alterno: var(--apmv-verde-niebla); /* * Aviso. Rojo apagado, no de alarma: un error de formulario es una * corrección, no una emergencia. 7,1:1 sobre blanco. */ --apmv-alerta: #a3261b; --apmv-alerta-velo: #fdf3f2; /* ===================================================================== TIPOGRAFÍA ===================================================================== Dos familias, como manda la regla del proyecto. Las pilas de reserva están elegidas por métrica: si la fuente no llega, la página no se descoloca. ===================================================================== */ --apmv-serif: "Spectral", Georgia, "Times New Roman", serif; --apmv-sans: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --apmv-estrecha: "Archivo Narrow", "Archivo", "Segoe UI Condensed", system-ui, sans-serif; /* * Escala fluida. Cada tamaño interpola entre 320px y 1280px de ancho con * clamp(), así que no hay saltos bruscos en los anchos intermedios —que * son justamente los que nadie prueba—. */ --apmv-txt-xs: 0.8125rem; /* 13px · metadatos */ --apmv-txt-s: 0.9375rem; /* 15px · apoyo */ --apmv-txt-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --apmv-txt-m: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --apmv-txt-l: clamp(1.375rem, 1.27rem + 0.52vw, 1.75rem); --apmv-txt-xl: clamp(1.75rem, 1.52rem + 1.14vw, 2.5rem); --apmv-txt-2xl: clamp(2.125rem, 1.7rem + 2.1vw, 3.5rem); --apmv-txt-3xl: clamp(2.5rem, 1.86rem + 3.2vw, 4.5rem); --apmv-interlinea-apretada: 1.15; --apmv-interlinea-titular: 1.2; --apmv-interlinea-lectura: 1.65; /* El tracking negativo solo en titulares grandes: en texto pequeño estorba. */ --apmv-tracking-titular: -0.015em; --apmv-tracking-etiqueta: 0.08em; /* ===================================================================== ESPACIO ===================================================================== Escala de razón fija sobre 4px. No se usan valores fuera de ella: un `margin: 23px` es una decisión que nadie tomó. ===================================================================== */ --apmv-e1: 0.25rem; --apmv-e2: 0.5rem; --apmv-e3: 0.75rem; --apmv-e4: 1rem; --apmv-e5: 1.5rem; --apmv-e6: 2rem; --apmv-e7: 3rem; --apmv-e8: 4rem; --apmv-e9: 6rem; /* Aire entre secciones: crece con la pantalla, porque el aire es parte del diseño. */ --apmv-aire-seccion: clamp(3rem, 2rem + 5vw, 6rem); /* ===================================================================== MEDIDAS ===================================================================== */ --apmv-medida-texto: 68ch; /* Medida de línea cómoda para leer seguido. */ --apmv-medida-estrecha: 46ch; --apmv-ancho-contenedor: 76rem; --apmv-ancho-editorial: 44rem; --apmv-margen-lateral: clamp(1.25rem, 4vw, 3rem); /* ===================================================================== FILETES Y SUPERFICIES ===================================================================== Sin sombras difusas por sistema: el sistema visual se sostiene con filetes, aire y jerarquía tipográfica. La regla de la dirección visual. ===================================================================== */ --apmv-filete: 2px; --apmv-filete-fino: 1px; --apmv-filete-marca: 3px; --apmv-radio: 2px; /* Casi recto: institucional, no aplicación. */ --apmv-radio-boton: 3px; /* ===================================================================== ESTADOS INTERACTIVOS ===================================================================== El foco es visible SIEMPRE y no se elimina en ningún sitio. Tres píxeles de verde profundo con dos de separación: se ve sobre papel blanco y sobre el velo verde, que son los dos fondos del sitio. ===================================================================== */ --apmv-foco-grosor: 3px; --apmv-foco-separacion: 2px; --apmv-foco-color: var(--apmv-verde-profundo); --apmv-transicion: 160ms ease-out; } /* * Quien pide menos movimiento, recibe menos movimiento. No es una cortesía: * para algunas personas una animación es un mareo. */ @media (prefers-reduced-motion: reduce) { :root { --apmv-transicion: 0ms; } }