/* ========================================================================== Tokens — custom properties del sistema de diseño. IMPORTANTE — valores PROVISIONALES: Todo valor marcado con la etiqueta PROVISIONAL viene de una paleta de espera entregada por el cliente mientras no existan los hexadecimales definitivos de marca. Estos valores viven ÚNICAMENTE en este archivo: ningún otro CSS del proyecto debe repetir un hexadecimal o un tamaño tipográfico a mano, siempre a través de estas variables. ========================================================================== */ :root { /* -------------------------------------------------------------------- Paleta — PROVISIONAL -------------------------------------------------------------------- */ --aq-black: #0D0D0D; /* PROVISIONAL */ --aq-black-deep: #060606; /* PROVISIONAL */ --aq-gold: #a8895e; /* PROVISIONAL */ --aq-gold-2: #a9895f; /* PROVISIONAL */ --aq-gold-light: #cdb893; /* PROVISIONAL */ --aq-beige: #fbf9f5; /* PROVISIONAL */ --aq-gray-panel: #f8f8f8; /* PROVISIONAL */ --aq-gray-border: #DDDDDD; /* PROVISIONAL */ --aq-gray-light: #505050; /* PROVISIONAL */ --aq-text: #3D3D3D; /* PROVISIONAL */ --aq-text-2: #959595; /* PROVISIONAL */ --aq-heading: #727272; /* PROVISIONAL */ /* Blanco puro: no es una decisión de marca pendiente, se usa tal cual */ --aq-white: #FFFFFF; /* Borde de card sobre fondo oscuro: no es un hex fijo, es un blanco translúcido para que funcione sobre --aq-black y --aq-black-deep */ --aq-card-border-dark: rgba(255, 255, 255, 0.14); /* PROVISIONAL */ /* Estados de validación del formulario (Fase 6.4) — el diseño no los define. NO llevan la etiqueta PROVISIONAL: no son una decisión de marca pendiente, son una decisión de implementación, mismo criterio que --aq-icon-circle-size (Fase 2.3). Justificación en el registro de tareas.md, Fase 6.4. - --aq-danger: granate desaturado, no un rojo puro — no compite con el dorado ni rompe el tono sobrio de una marca financiera. - --aq-success: reutiliza el dorado (ya es el color "positivo" del proyecto: check-list, CTA). Token propio, no --aq-gold a mano en el CSS de validación, porque representa un rol semántico distinto — mismo criterio que --aq-ls-wordmark (Fase 4.9, auditoría hallazgo d): si el dorado de marca cambiara pero el feedback de éxito debiera seguir siendo dorado, no deberían quedar acoplados. */ --aq-danger: #9B3A3A; --aq-success: var(--aq-gold); /* -------------------------------------------------------------------- Tipografía — familias confirmadas (ver CLAUDE.md) -------------------------------------------------------------------- */ --aq-font-serif: "Tiro Bangla", serif; --aq-font-sans: "Public Sans", sans-serif; --aq-font-sans-bold: "Public Sans Bold", sans-serif; /* Tiro Bangla NO tiene bold: no crear un token de peso para ella. Estos pesos son solo para Public Sans (cuerpo, labels, antetítulos). */ --aq-fw-regular: 400; --aq-fw-medium: 500; --aq-fw-semibold: 600; --aq-fw-bold: 700; /* Escala tipográfica — PROVISIONAL, mobile-first. En REM a propósito (saneamiento de unidades y radios, previo a Servicios): rem respeta la preferencia de tamaño de fuente base del navegador (WCAG 1.4.4); el zoom de página funciona igual en px, pero esa preferencia específica no. El equivalente en px de cada valor va en el comentario, a 16px de raíz (el proyecto no redefine `font-size` en `html`), solo para lectura rápida — el valor real sigue siendo el rem. typography.css la sube de escala desde `md` y `lg`. */ --aq-fs-h1: 2.25rem; /* 36px · PROVISIONAL */ --aq-fs-h2: 1.875rem; /* 30px · PROVISIONAL */ --aq-fs-h3: 1.375rem; /* 22px · PROVISIONAL */ --aq-fs-h4: 1.125rem; /* 18px · PROVISIONAL */ --aq-fs-h5: 17px; /* 17px · PROVISIONAL */ --aq-fs-lead: 1.125rem; /* 18px · PROVISIONAL */ --aq-fs-body: 1rem; /* 16px · PROVISIONAL */ --aq-fs-body1: 0.9375rem; /* 15px · PROVISIONAL */ --aq-fs-small: 0.875rem; /* 14px · PROVISIONAL */ --aq-fs-overline: 0.8125rem; /* 13px · PROVISIONAL — antetítulo en mayúsculas */ /* Variantes de la escala desde `md` (≥768px) — mismos valores, más grandes. typography.css las aplica dentro de sus media queries; ningún tamaño se escribe fuera de este archivo. */ --aq-fs-h1-md: 3rem; /* 48px · PROVISIONAL */ --aq-fs-h2-md: 2.25rem; /* 36px · PROVISIONAL */ --aq-fs-h3-md: 1.5rem; /* 24px · PROVISIONAL */ --aq-fs-h4-md: 1.25rem; /* 20px · PROVISIONAL */ --aq-fs-lead-md: 1.25rem; /* 20px · PROVISIONAL */ /* Variantes desde `lg` (≥1200px) */ --aq-fs-h0-lg: 4.5rem; /* 72px · PROVISIONAL */ --aq-fs-h1-lg: 3.75rem; /* 60px · PROVISIONAL */ --aq-fs-h2-lg: 2.75rem; /* 44px · PROVISIONAL */ --aq-fs-h2-2-lg: 40px; --aq-fs-h3-lg: 1.75rem; /* 28px · PROVISIONAL */ --aq-fs-h4-lg: 1.375rem; /* 22px · PROVISIONAL */ --aq-fs-lead-lg: 1.375rem; /* 22px · PROVISIONAL */ --aq-fs-body-lg: 17px; /* 17px · PROVISIONAL */ --aq-lh-heading: 1.15; --aq-lh-body: 1.6; /* letter-spacing en EM a propósito (saneamiento de unidades y radios, previo a Servicios): en em escalan con el tamaño de fuente del elemento que los usa, que es justo lo que busca el tracking (la misma proporción visual en cualquier tamaño de la escala). Convertirlos a px fijaría una separación absoluta que se vería distinta —proporcionalmente más ancha o más angosta— en cada escalón de --aq-fs-*. No se tocan. */ --aq-ls-overline: 0.14em; /* letter-spacing amplio del antetítulo */ --aq-ls-overline-2: 0.5px; /* letter-spacing más estrecho del antetítulo secundario */ --aq-ls-heading: 0; /* Dos escalones para .aq-caption-label (etiquetas pequeñas en mayúsculas: nav, políticas, formulario, datos de contacto, compromisos). Valores existentes, solo tokenizados — no se unifican: puede ser intención del diseño, sin el archivo original no se puede confirmar. */ --aq-ls-caption: 0.02em; --aq-ls-caption-wide: 0.04em; /* Wordmark "Aquila Capital" (header, menú móvil, footer). Coincide numéricamente con --aq-ls-caption-wide, pero es un rol de diseño distinto (marca, no etiqueta) — token propio para no acoplar su evolución a la de las etiquetas si algún día cambian por separado. */ --aq-ls-wordmark: 0.04em; /* -------------------------------------------------------------------- Espaciado — escala propia, base 8px. En PX (saneamiento de unidades y radios, previo a Servicios, convertida desde rem): un espaciado no tiene que responder a la preferencia de tamaño de fuente del usuario como el texto — es geometría de layout, no tipografía. La conversión es neutra a la raíz de 16px que ya usa el proyecto (nadie redefine `font-size` en `html`): ningún valor cambia, solo la unidad. Verificado con Chrome antes y después, en los tres breakpoints, sin ningún corrimiento. Convive con la escala de spacers de Bootstrap (g-*, mt-*, gap-*, etc.), que se sigue usando en el HTML para gutters y márgenes de utilidad (regla 2 de CLAUDE.md: utilidades antes que CSS nuevo). Sin build step no hay Sass que recompilar, así que esa escala no se puede retematizar por variables — las dos escalas conviven, documentadas, en vez de fingir que son una sola (auditoría Fase 4.9). OJO: el número NO corresponde entre ambas desde el escalón 3 — "g-4" de Bootstrap NO equivale a "--aq-space-4". Equivalencia real: Bootstrap px --aq-space-N g/mt/gap-1 4px --aq-space-1 (4px) ✓ coincide g/mt/gap-2 8px --aq-space-2 (8px) ✓ coincide g/mt/gap-3 16px --aq-space-4 (16px) ✗ NO es --aq-space-3 g/mt/gap-4 24px --aq-space-5 (24px) ✗ NO es --aq-space-4 g/mt/gap-5 48px --aq-space-7 (48px) ✗ NO es --aq-space-5 -------------------------------------------------------------------- */ --aq-space-1: 4px; --aq-space-2: 8px; --aq-space-3: 12px; --aq-space-4: 16px; --aq-space-5: 24px; --aq-space-6: 32px; --aq-space-7: 48px; --aq-space-8: 64px; --aq-space-9: 96px; /* Espaciado vertical estándar de una banda .aq-section (Fase 1.4) */ --aq-section-padding-y: var(--aq-space-7); /* Medidas propias de componentes (Fase 2) — no son valores de marca, son decisiones de implementación; no llevan la etiqueta PROVISIONAL. En px por el mismo motivo que --aq-space-*: son layout, no texto (saneamiento de unidades y radios, previo a Servicios). */ --aq-icon-circle-size: 48px; --aq-card-padding: var(--aq-space-5); --aq-card-padding-5: var(--aq-space-7); --aq-section-header-max-width: 640px; /* ancho de lectura de la variante centrada */ /* -------------------------------------------------------------------- Radios y bordes — en px, mismo motivo que el espaciado (saneamiento de unidades y radios, previo a Servicios). --aq-radius-circle sigue en % a propósito: no es una medida de longitud que convertir, es la fracción que vuelve circular cualquier caja cuadrada, sea del tamaño que sea. -------------------------------------------------------------------- */ --aq-radius-sm: 4px; --aq-radius-md: 8px; --aq-radius-circle: 50%; --aq-border-width: 1px; /* -------------------------------------------------------------------- Transiciones -------------------------------------------------------------------- */ --aq-transition-fast: 150ms; --aq-transition-base: 250ms; --aq-transition-slow: 400ms; --aq-ease: cubic-bezier(0.4, 0, 0.2, 1); /* -------------------------------------------------------------------- Z-index -------------------------------------------------------------------- */ --aq-z-header: 1030; /* alineado con el z-index de .navbar-fixed de Bootstrap */ --aq-z-mobile-menu: 1040; --aq-z-overlay: 1; /* overlay oscuro sobre imágenes de fondo */ /* -------------------------------------------------------------------- Layout — header fijo Medida real en móvil/tablet (Fase 3.3, Chrome headless: 78px de header renderizado + margen de seguridad). header.css la sube a 88px desde `lg`, donde el logo de dos líneas y el link CONTACTO hacen el header un poco más alto. La Fase 6 la recalcula por JS si el alto real cambia (p. ej. el menú salta de línea). -------------------------------------------------------------------- */ --aq-header-height: 80px; /* -------------------------------------------------------------------- Sobreescritura de variables de Bootstrap (--bs-*) Nunca se editan los archivos de assets/vendor/bootstrap/: se personaliza por variable, desde aquí. -------------------------------------------------------------------- */ --bs-font-sans-serif: var(--aq-font-sans); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: var(--aq-fs-body); --bs-body-line-height: var(--aq-lh-body); --bs-body-color: var(--aq-text); --bs-body-bg: var(--aq-white); --bs-border-color: var(--aq-gray-border); --bs-link-color: var(--aq-gold); --bs-link-hover-color: var(--aq-gold); /* Bootstrap 5.3 solo expone el color de los headings como variable (--bs-heading-color, en singular). Su font-family y font-weight están hardcodeados en el reboot (heredan de --bs-body-font-family y usan un 500 fijo, sin variable): esos dos se fuerzan con una regla normal sobre h1–h6 en typography.css, no hay hook de Bootstrap para ellos. */ --bs-heading-color: var(--aq-heading); }