/* ================================================================= AP SERVICIOS DE CONSTRUCCIÓN Y DESARROLLOS SISTEMA DE DISEÑO — TOKENS ----------------------------------------------------------------- Extraído de styles.css (el boceto). La dirección visual está APROBADA y no se cambia: los valores de acá son los mismos del boceto, solo que nombrados, agrupados y normalizados. DIRECCIÓN ESTÉTICA — solidez industrial patagónica. Bandas horizontales de ancho completo. Franjas oscuras que separan el relato como plantas de un edificio. Peso tipográfico alto y mayúsculas apretadas: una empresa con años, que no se adorna. PALETA: carbón #16150F · ladrillo #C2562B · hormigón #F3F0E9 TIPO: Chivo 900/700 (títulos) · Public Sans 400/600 (texto) REGLA DE USO Ningún archivo de estilos escribe un color, un tamaño, un tracking, una duración ni un z-index a mano. Si hace falta un valor que no está acá, se agrega acá primero. Un valor suelto es una decisión que nadie va a poder repetir en la página siguiente. ================================================================= */ :root { /* =============================================================== 1. COLOR — canales base --------------------------------------------------------------- Se declaran los canales RGB sueltos para poder componer tintes con rgb(var(--x) / alpha) en vez de repetir rgba() a mano. En el boceto había 74 rgba() escritos a mano sobre estos mismos cuatro colores. =============================================================== */ --rgb-carbon: 22 21 15; /* #16150F */ --rgb-carbon-dark: 11 10 7; /* #0B0A07 */ --rgb-ladrillo: 194 86 43; /* #C2562B */ --rgb-white: 255 255 255; --rgb-wa: 37 211 102; /* #25D366 — verde de marca de WhatsApp, no se toca */ --rgb-hormigon: 243 240 233; /* #F3F0E9 */ --rgb-surface: 252 250 245; /* #FCFAF5 — --color-surface, para tintarla con alpha */ /* ---- Colores sólidos ---- */ --color-primary: #16150F; /* carbón — texto y franjas oscuras */ --color-primary-light: #34312A; /* carbón lavado — leads sobre claro */ --color-primary-dark: #0B0A07; /* carbón profundo — header, footer, hero */ --color-accent: #C2562B; /* ladrillo — el único color de acento */ --color-accent-hover: #A3441F; --color-accent-deep: #8F3A18; /* fondo de bloques destacados */ /* Ladrillo oscurecido: el acento cuando es TEXTO CHICO sobre hormigón o superficie clara (.eyebrow, .tag, .hechos strong, .link-arrow). El ladrillo pleno contra --color-bg/--color-surface queda en ~4:1 y no pasa AA — mismo problema que --color-accent-light resuelve del otro lado, contra fondo oscuro. Reusa --color-accent-hover (ya aprobado, no es un color nuevo) porque a 5,4:1 alcanza AA con margen. Sólo texto: --color-accent sigue siendo el de fondos, bordes y los em de título, donde el 3:1 de "large text"/UI ya está cubierto. */ --color-accent-ink: var(--color-accent-hover); /* Ladrillo aclarado: el acento cuando va SOBRE CARBÓN. El ladrillo pleno contra --color-primary-dark queda en 4.3:1 y no pasa AA en texto chico; este llega a 6.4:1. Se usa en el degradé de progreso y en las etiquetas de acento sobre fondo oscuro (.paso-quien). */ --color-accent-light: #E0793F; --color-bg: #F3F0E9; /* hormigón — fondo por defecto */ --color-bg-alt: #E6E1D5; /* hormigón sombreado — bandas alternas */ --color-surface: #FCFAF5; /* superficie de tarjetas y paneles */ --color-text: #16150F; /* A #6B655A justo (4.43:1) sobre --color-bg-alt: no pasa AA para texto normal. Un pelo más oscuro alcanza 4.5:1 ahí sin cambiar nada visible sobre --color-bg o --color-surface, donde ya sobraba margen. */ --color-text-muted: #696358; --color-text-inverse: #F3F0E9; --color-white: #fff; /* ---- Estado ---- */ --color-error: #C0392B; --color-error-bg: #FDF2F0; /* ---- WhatsApp (color de marca ajeno, no se toca) ---- */ --color-wa: #25D366; --color-wa-hover: #128C7E; /* =============================================================== 2. COLOR — escalas de opacidad --------------------------------------------------------------- NORMALIZADO. El boceto usaba 19 opacidades distintas de hormigón sobre fondo oscuro (.1 .12 .14 .16 .2 .22 .4 .48 .5 .52 .55 .6 .64 .68 .7 .74 .75 .82 .88). Colapsadas a 4 niveles de tinta + 2 de línea + 1 de fondo. Diferencias de .02 que nadie percibe pero que hacen que dos secciones no se parezcan entre sí. =============================================================== */ /* Tinta sobre fondo oscuro */ --ink-inv-1: rgb(var(--rgb-hormigon) / 1); /* títulos */ --ink-inv-2: rgb(var(--rgb-hormigon) / .74); /* párrafos */ --ink-inv-3: rgb(var(--rgb-hormigon) / .55); /* labels, metadatos */ --ink-inv-4: rgb(var(--rgb-hormigon) / .40); /* terciario, copyright */ /* Tinta sobre ladrillo (bloque .ventaja) */ --ink-on-accent-1: rgb(255 255 255 / 1); --ink-on-accent-2: rgb(255 255 255 / .94); --ink-on-accent-3: rgb(255 255 255 / .75); /* Líneas sobre fondo oscuro */ --line-inv-1: rgb(var(--rgb-hormigon) / .16); /* borde visible */ --line-inv-2: rgb(var(--rgb-hormigon) / .10); /* separador sutil */ /* Líneas sobre ladrillo. Faltaba: .ventaja la escribía a mano (rgb(var(--rgb-white) / .16)) y la banda Profili del home necesita la misma línea para su grilla de hechos. Ahora es un token. */ --line-on-accent: rgb(var(--rgb-white) / .22); /* Líneas sobre fondo claro */ --color-line: rgb(var(--rgb-carbon) / .15); --color-line-soft: rgb(var(--rgb-carbon) / .08); /* Fondos translúcidos */ --wash-inv: rgb(var(--rgb-hormigon) / .05); /* panel sobre oscuro */ --wash-accent: rgb(var(--rgb-ladrillo) / .10); /* fondo de tag */ --wash-carbon: rgb(var(--rgb-carbon) / .02); /* trama diagonal */ /* Velos oscuros para superponer texto sobre foto (ver §9) */ --veil-1: rgb(var(--rgb-carbon-dark) / .90); --veil-2: rgb(var(--rgb-carbon-dark) / .64); --veil-3: rgb(var(--rgb-carbon-dark) / .42); --veil-4: rgb(var(--rgb-carbon-dark) / .24); /* =============================================================== 3. TIPOGRAFÍA — familias --------------------------------------------------------------- El par está documentado en CLAUDE.md. Resumen: Chivo es una grotesca de terminaciones rectas que en 900 no se deforma en mayúsculas apretadas; Public Sans está dibujada para formularios y documentación pública, así que aguanta párrafos largos y labels de 11px sin cansar. Contraste de rol, no de estilo. =============================================================== */ --font-display: 'Chivo', 'Franklin Gothic Medium', Impact, sans-serif; --font-body: 'Public Sans', 'Segoe UI', sans-serif; /* ---- Pesos ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 900; /* =============================================================== 4. TIPOGRAFÍA — escala de lectura (fluida) --------------------------------------------------------------- clamp(mínimo, fluido, máximo). Mobile first: el mínimo es lo que se ve en un teléfono, el máximo lo que se ve en desktop. =============================================================== */ --text-2xs: clamp(0.62rem, 1.2vw, 0.68rem); /* NUEVO — ver §5 */ --text-xs: clamp(0.69rem, 1.4vw, 0.76rem); --text-sm: clamp(0.87rem, 1.9vw, 0.94rem); --text-base: clamp(1.00rem, 2.2vw, 1.05rem); --text-lg: clamp(1.10rem, 2.8vw, 1.25rem); --text-xl: clamp(1.35rem, 3.4vw, 1.70rem); --text-2xl: clamp(1.85rem, 4.6vw, 2.85rem); --text-hero: clamp(2.50rem, 7.4vw, 4.60rem); /* Números grandes (fichas, franja de datos, cards) */ --text-num-sm: clamp(1.10rem, 3.6vw, 1.35rem); --text-num-md: clamp(1.35rem, 4.2vw, 1.60rem); --text-num-lg: clamp(1.60rem, 5.0vw, 2.20rem); /* =============================================================== 5. TIPOGRAFÍA — escala de labels (fija) --------------------------------------------------------------- NORMALIZADO. El boceto tenía 25 font-size en rem escritos a mano, casi todos para el mismo elemento: la etiqueta en mayúsculas con tracking abierto. Aparece 15 veces (eyebrow, tag de obra, año, etapa, specs, labels de formulario, títulos de footer, brand…) y es una firma del diseño: la retícula técnica de la marca. Se fija en 4 pasos. NO son fluidas a propósito: por debajo de 11px el tracking abierto en mayúsculas se vuelve ilegible. =============================================================== */ --label-xs: 0.62rem; /* tags, año de obra, etapa, specs */ --label-sm: 0.68rem; /* franja de datos, labels de form, footer */ --label-md: 0.74rem; /* CTA del nav, notas de formulario */ --label-lg: 0.82rem; /* botones, link-arrow */ /* Tamaños de rol fijo (no fluidos: son piezas de chapa, no texto) */ --text-marca: 1.30rem; /* logotipo AP, header y footer */ --text-marca-sub: 0.58rem; /* bajada del logotipo */ --text-nombre: 0.95rem; /* nombre de obra, de persona, de proveedor */ /* =============================================================== 6. TIPOGRAFÍA — tracking e interlínea --------------------------------------------------------------- NORMALIZADO. 20 valores de letter-spacing distintos colapsados a 7. El sistema real son dos gestos opuestos: títulos apretados (negativo) y labels abiertos (positivo). Todo lo del medio era ruido. =============================================================== */ --track-hero: -0.035em; /* h1 */ --track-tight: -0.028em; /* h2 y display en general */ --track-snug: -0.020em; /* h3, números, nombres de obra */ --track-normal: 0; --track-brand: 0.060em; /* logotipo "AP" */ --track-wide: 0.090em; /* botones y labels chicos */ --track-wider: 0.130em; /* labels de sección y footer */ --track-widest: 0.200em; /* eyebrow */ --track-mega: 0.300em; /* bajada del logotipo */ --leading-display: 1.03; /* títulos */ --leading-snug: 1.25; --leading-normal: 1.55; /* leads */ --leading-body: 1.62; /* párrafos */ --measure: 60ch; /* ancho máximo de párrafo */ --measure-lead: 48ch; /* ancho máximo de lead */ /* =============================================================== 7. ESPACIADO =============================================================== */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Padding lateral del contenedor: cambia por breakpoint */ --gutter: 1.25rem; /* =============================================================== 8. LAYOUT =============================================================== */ --wrap: 1280px; --header-h: 72px; /* redefinido a 80px en ≥1100px */ /* Áreas táctiles. NORMALIZADO: el boceto tenía 46/50/52/54px para lo mismo. Mínimo real de accesibilidad: 44px. */ --tap: 54px; /* botones */ --tap-sm: 48px; /* inputs, summary de FAQ, toggle */ /* Piezas circulares/cuadradas recurrentes */ --size-ico-sm: 19px; --size-ico-md: 22px; --size-ico-lg: 28px; --size-badge: 40px; /* .stat-ico, .ci, iconos de footer */ --size-ring: 42px; /* aro de play */ --size-dot: 46px; /* número de paso del proceso */ --size-avatar: 54px; /* foto de equipo */ /* Alto de la caja de logo de proveedor. Lo comparten dos reglas que tienen que coincidir: el alto máximo del y el alto mínimo de la celda, para que el día que lleguen los logos reemplazar un nombre por una imagen no mueva la franja. */ --size-logo: 40px; --size-mark: 34px; /* marca del header — reservado para el logo definitivo */ --size-mark-lg: 38px; /* marca del footer, más grande */ /* Barra de acción fija en mobile (/gran-martina/ y /llave-en-mano/, las dos páginas que piden un dato). Es un token y no un valor suelto porque lo usan dos reglas que tienen que coincidir sí o sí: la altura de la barra y el padding que se le suma al para que no tape el final de la página. */ --cta-fijo-h: 76px; /* Anchos mínimos de columna de las grillas que salen de datos. La cantidad de piezas la decide el JSON, así que lo que se fija es el mínimo de cada columna y no cuántas columnas hay. */ --col-galeria: 200px; /* miniatura de galería de obra */ /* Celda de ficha técnica. A 120px entran dos por fila en teléfono y cuatro en el panel de desktop, que es lo que hace que una ficha de cuatro datos caiga 2+2 y no 3+1. */ --col-ficha: 120px; --col-render: 300px; /* render 3:2 — pieza para mirar, no miniatura */ --col-ficha-nav: 240px; /* obra anterior / siguiente */ /* Retrato de una persona del equipo. Mínimo y no cantidad de columnas: hoy el equipo son tres personas y la cantidad la decide empresa.json → equipo, no el CSS. */ --col-equipo: 200px; /* =============================================================== 9. IMAGEN — proporciones y tratamiento --------------------------------------------------------------- El boceto fijaba ALTURAS EN PX (130 / 150 / 250 / 280 / 300 / 320 / 380 / 400 / 420 / 500 / 520). Eso genera CLS y obliga a recortar cada foto a medida. Se reemplaza por aspect-ratio, que es lo que pide CLAUDE.md y lo que permite que una foto de celular entre sin rediseñar nada. --object-position se deja como token para que cada foto pueda re-anclarse desde el JSON (una fachada mal encuadrada se corrige con un dato, no con CSS). =============================================================== */ --ratio-hero: 16 / 9; --ratio-pano: 21 / 9; --ratio-obra: 4 / 3; /* tarjeta de obra */ --ratio-panel: 3 / 2; /* foto grande de ficha */ --ratio-etapa: 3 / 2; /* avance de obra */ --ratio-retrato: 9 / 10; /* foto vertical de empresa */ --ratio-avatar: 1; --ratio-plano: 4 / 3; /* planos y renders */ --object-position: 50% 50%; /* Grado fotográfico común: baja saturación, sube micro-contraste. Unifica material de origen mixto (pro + celular). */ --img-grade: saturate(.88) contrast(1.04); --img-grade-strong: saturate(.72) contrast(1.10) brightness(.97); /* Velo sobre foto para texto encima. NO depende de la foto: garantiza contraste aunque llegue una imagen clara y plana. */ --scrim-hero: linear-gradient(100deg, var(--veil-1) 0%, var(--veil-2) 44%, var(--veil-4) 74%, var(--veil-3) 100%), linear-gradient(to bottom, rgb(var(--rgb-carbon-dark) / .70) 0%, transparent 26%, transparent 64%, rgb(var(--rgb-carbon-dark) / .80) 100%); --scrim-card: linear-gradient(to top, rgb(var(--rgb-carbon-dark) / .78) 0%, transparent 62%); /* Grano: unifica fotos de calidad dispar. Es identidad, no adorno. */ --grain-opacity: 0.038; /* global, sobre toda la página */ --grain-opacity-img: 0.070; /* reforzado sobre imágenes */ --grain-size: 190px; --grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Tramas de fondo */ --pattern-blueprint-size: 44px; --pattern-diagonal: repeating-linear-gradient(45deg, transparent 0 11px, var(--wash-carbon) 11px 12px); --pattern-diagonal-dark: repeating-linear-gradient(45deg, transparent 0 11px, var(--wash-inv) 11px 12px); /* Mapas embebidos */ --map-filter: grayscale(.4) contrast(1.04); /* =============================================================== 10. BORDES Y SOMBRAS --------------------------------------------------------------- Radios casi nulos a propósito: el diseño es de cantos rectos. =============================================================== */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 100px; --border-hair: 1px; --border-medium: 1.5px; --border-mark: 3px; /* subrayado de sección / borde activo */ --border-flag: 4px; /* barra de acento a la izquierda */ --shadow-sm: 0 1px 2px rgb(var(--rgb-carbon) / .06), 0 3px 10px rgb(var(--rgb-carbon) / .05); --shadow-md: 0 1px 2px rgb(var(--rgb-carbon) / .05), 0 6px 18px rgb(var(--rgb-carbon) / .09), 0 16px 40px rgb(var(--rgb-carbon) / .07); --shadow-lg: 0 2px 4px rgb(var(--rgb-carbon) / .06), 0 12px 30px rgb(var(--rgb-carbon) / .12), 0 30px 68px rgb(var(--rgb-carbon) / .13); /* =============================================================== 11. MOVIMIENTO --------------------------------------------------------------- NORMALIZADO: 10 duraciones distintas → 5. --ease-out es el que da el frenado largo característico del boceto (paneles, slider, subrayado del nav). =============================================================== */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .18s; --dur: .28s; --dur-slow: .45s; --dur-slower: .70s; --dur-reveal: .85s; --transition: var(--dur) var(--ease); --slide-speed: .60s; /* desplazamiento del carrusel */ --autoplay-ms: 6000; /* leído desde JS */ /* =============================================================== 12. PROFUNDIDAD --------------------------------------------------------------- Toda la escala junta para que nadie invente un z-index: 9999. =============================================================== */ --z-below: -1; --z-base: 1; --z-raised: 3; --z-header: 900; --z-float: 1000; --z-grain: 9999; --z-skip: 10000; } /* ================================================================= 13. BREAKPOINTS ----------------------------------------------------------------- Las media queries no aceptan custom properties, así que quedan documentadas acá como constantes del proyecto. Son dos, y el CSS se escribe siempre mobile first, subiendo con min-width. --bp-md: 768px → tablet: el layout pasa a dos columnas --bp-lg: 1100px → desktop: aparece el nav horizontal, --header-h sube a 80px Si hace falta un tercero, se agrega acá antes de usarlo. ================================================================= */ @media (min-width: 768px) { :root { --gutter: 2rem; } } @media (min-width: 1100px) { :root { --header-h: 80px; } } /* ================================================================= 14. MOTION REDUCIDO ----------------------------------------------------------------- Se anula a nivel token para que ninguna hoja tenga que acordarse. ================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; --dur-slower: .01ms; --dur-reveal: .01ms; --slide-speed: .01ms; } } /* ================================================================= REGISTRO DE NORMALIZACIÓN ----------------------------------------------------------------- Qué se cambió al extraer el sistema. Los VALORES son los mismos del boceto; lo que cambió es que ahora tienen nombre y son menos. · 74 rgba() escritos a mano → 4 canales RGB + 12 tokens de tinte. · 19 opacidades de hormigón → 4 de tinta + 2 de línea + 1 de fondo. · 25 font-size en rem → escala de lectura (8) + labels (4) + números (3). · 20 letter-spacing → 7 pasos de tracking. · 10 duraciones → 5. · 11 alturas fijas en px → 8 aspect-ratio (§9). · z-index sueltos (9999, → escala de 7 pasos. 10000, 900, 1000, 3, 2, 1) · 4 áreas táctiles (46/50/ → 2 (--tap, --tap-sm). 52/54px) PENDIENTE DE MARCA (segunda etapa, lo define el cliente) Logo definitivo, colores institucionales y tipografías propias. Si el logo trae una paleta distinta, se cambian los valores de §1 y §2 y el resto del sistema sigue funcionando sin tocarse: por eso los tintes se componen desde --rgb-* y no están escritos a mano. ================================================================= */