/* ==========================================================================
BASE.CSS
Sistema de diseño — Design Tokens (variables) + Reset moderno
Sitio corporativo: Auditoría, Cumplimiento y Ciberseguridad
==========================================================================
Sistema "El Sello": estética de documento notarial/regulatorio — tinta
cálida casi negra + acento bronce antiguo sobre papel hueso, tipografía
Libre Caslon (display/headline) + Public Sans (cuerpo), marca en sello
circular grabado. Reemplaza el sistema azul-marino + "Signal Glow"
anterior (demasiado cercano al molde genérico del sector compliance/SaaS).
Orden de carga recomendado en el :
1) Google Fonts (preconnect + link, ver bloque de abajo)
2) base.css ← este archivo (tokens + reset)
3) components.css ← componentes reutilizables
4) layout.css / css específico de página (fases siguientes)
========================================================================== */
/* --------------------------------------------------------------------------
1. TIPOGRAFÍA — Google Fonts elegidas
--------------------------------------------------------------------------
- Libre Caslon Display (serif, un solo peso 400) → SOLO el titular hero
(h1 de portada). Es un corte de exhibición: gravedad de documento legal
impreso, sin la calidez editorial de una serif tipo Fraunces.
- Libre Caslon Text (serif, 400/700/italic) → headline/title (h2-h6,
citas). Itálica reservada para énfasis puntual dentro de titulares.
- Public Sans (sans-serif, 400-700) → Cuerpo de texto, UI, formularios,
nav. Es la tipografía oficial de los servicios digitales del gobierno
de EE. UU. — coherente con el registro "documento oficial" de la marca.
- Spline Sans Mono (mono, 400-600) → USO MUY LIMITADO: folios, fechas de
emisión, números de certificación — donde el contenido es literalmente
un dato de libro contable. Nunca como tipografía de UI general (ver
"Brand bans": mono como atajo perezoso para "técnico" está prohibido
salvo que el contenido sea, en efecto, un número de expediente/ledger).
RENDIMIENTO (Lighthouse): NO usar @import aquí — es render-blocking y
penaliza el First Contentful Paint. Cargar las fuentes desde el
de cada HTML así:
Este archivo solo declara las variables --font-display / --font-heading /
--font-body / --font-mono que consumen esas fuentes, con fallbacks de
sistema seguros.
-------------------------------------------------------------------------- */
:root {
/* ------------------------------------------------------------------------
2. PALETA DE COLOR — "El Sello" — nombres semánticos
------------------------------------------------------------------------
Tinta casi negra (cálida, no azulada) como color de marca dominante, con
acento bronce/oro antiguo tipo sello notarial. Deliberadamente FUERA del
eje azul que satura todo el sector compliance/ciberseguridad — el azul
de confianza es el molde genérico de la categoría, no una decisión de
marca. Disciplina cromática: la tinta manda, blanco/hueso dominan en
fondos claros, el bronce solo en detalles puntuales (CTAs, checks,
estados activos, hover) — igual que un revisor usa un sello, no un
rotulador.
-------------------------------------------------------------------- */
/* Ink — casi negro cálido (no azulado), usado en texto de cuerpo y footer */
--color-ink: #1c1712;
/* Primary — familia de tinta cálida de marca (bloques oscuros: header
sólido, hero, tarjetas al hover, media, franja "otros servicios") */
--color-primary-900: #1c1712; /* ink-900 — bloque de marca principal */
--color-primary-800: #2a2319; /* ink-800 */
--color-primary-700: #3c3225; /* ink-700 — links, checks, foco */
--color-primary-600: #4a3e2e; /* ink-600 — el más claro de la familia tinta */
--color-primary-500: var(--color-primary-700);
--color-primary: var(--color-primary-700);
--color-primary-dark: var(--color-primary-900);
--color-primary-light: var(--color-primary-600);
/* Neutral — gris cálido (texto secundario, bordes, fondos alternos) */
--color-neutral-900: var(--color-ink);
--color-neutral-800: #2a2319;
--color-neutral-700: #4a4033;
--color-neutral-600: #6b6152; /* grey — texto muted, ~6:1 sobre blanco */
--color-neutral-500: #7d735f; /* grey-2 — placeholder, ajustado a ~4.7:1 sobre
blanco (el placeholder necesita el mismo
4.5:1 que el texto normal, no un gris más
claro "por elegancia") */
--color-neutral-400: #b0a78f;
--color-neutral-300: #cfc7b0;
--color-neutral-200: #dad4c8; /* line */
--color-neutral-100: #f1ece1; /* paper-2 */
--color-neutral-50: #faf7f1; /* paper */
/* Accent — bronce "Sello" (CTAs, énfasis, estados activos) usar con moderación */
--color-accent-900: #7a5b28; /* accent-ink — texto pequeño sobre fondos claros
(eyebrow, lang-switch, wa-bot): el accent base
da ~2.95:1 sobre blanco, por debajo de WCAG AA
(4.5:1). accent-900 da ~5.85:1. */
--color-accent-700: #8c6a34;
--color-accent-600: #b48a46; /* accent base */
--color-accent-500: #b48a46;
--color-accent: var(--color-accent-600);
--color-accent-dark: var(--color-accent-700);
--color-accent-light: #d4b274; /* accent-soft — ~8.8:1 sobre ink-900, para
eyebrows/texto pequeño sobre fondo oscuro */
/* Verde azulado — segundo color del ícono del logo (.logo__mark .fig-b),
uso exclusivo ahí, no del sistema de acento general. Junto con el
bronce y la figura frontal en tinta, completa el trío de colores
del ícono de equipo. */
--color-team-teal: #2f6f63;
/* Superficie / fondo */
--color-bg: #ffffff;
--color-bg-alt: var(--color-neutral-100);
/* ink-900, no --color-ink como fondo: The Ink-Dominant Rule (DESIGN.md)
reserva --color-ink para texto; los fondos de sección oscuros siempre
usan ink-900. */
--color-bg-inverse: var(--color-primary-900);
/* Texto */
--color-text: var(--color-ink);
--color-text-muted: var(--color-neutral-600);
--color-text-inverse: #ffffff;
--color-text-inverse-muted: rgba(255, 255, 255, 0.7);
/* Bordes */
--color-border: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
/* Estados semánticos (badges, mensajes de formulario) — se mantienen en
su familia de color convencional (verde/ámbar/rojo) para no romper las
expectativas de UX de validación de formularios. */
--color-success: #1e7a4a;
--color-success-bg: #e6f3ec;
--color-warning: #9a6b0a;
--color-warning-bg: #fbf1de;
--color-error: #b3261e;
--color-error-bg: #fbeaea;
--color-info: var(--color-primary-700);
--color-info-bg: var(--color-neutral-100);
/* ------------------------------------------------------------------------
3. ESCALA TIPOGRÁFICA
------------------------------------------------------------------------ */
--font-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
--font-heading: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
/* Escala modular ~1.25 (major third), base 16px, con clamp() para fluidez */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20-24px */
--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 24-30px */
--text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.25rem); /* 30-36px */
--text-4xl: clamp(2.25rem, 1.8rem + 2.2vw, 3rem); /* 36-48px */
--text-5xl: clamp(2.75rem, 2.1rem + 3.2vw, 3.75rem); /* 44-60px */
--text-6xl: clamp(3.25rem, 2.4rem + 4.5vw, 4.5rem); /* 52-72px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--leading-none: 1;
--leading-tight: 1.15; /* titulares grandes */
--leading-snug: 1.35; /* subtítulos */
--leading-normal: 1.55; /* párrafos */
--leading-relaxed: 1.75; /* texto largo / legal */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em; /* badges en mayúsculas */
--tracking-eyebrow: 0.22em; /* eyebrows — más ancho, calcado del modelo aprobado */
/* ------------------------------------------------------------------------
4. ESPACIADO — escala base 4px
------------------------------------------------------------------------ */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* Espaciado semántico reutilizable en secciones */
--space-section-y: clamp(var(--space-16), 8vw, var(--space-32));
--space-block-y: clamp(var(--space-8), 4vw, var(--space-16));
/* ------------------------------------------------------------------------
5. RADIOS, SOMBRAS, TRANSICIONES
------------------------------------------------------------------------
Radios casi rectos, más planos que el sistema anterior: esquinas a
0-2px leen como un documento grabado/timbrado, no como un producto de
consumo. --radius-full se conserva solo para píldoras/círculos
(badges, el mark del logo, el FAB de WhatsApp).
-------------------------------------------------------------------- */
--radius-sm: 0px;
--radius-md: 1px;
--radius-lg: 2px;
--radius-xl: 2px;
--radius-full: 999px;
--shadow-sm: 0 1px 2px rgba(28, 23, 18, 0.10);
--shadow-md: 0 4px 12px rgba(28, 23, 18, 0.12);
--shadow-lg: 0 12px 28px -8px rgba(28, 23, 18, 0.26);
--shadow-xl: 0 30px 60px -40px rgba(28, 23, 18, 0.40);
--shadow-focus: 0 0 0 3px rgba(140, 106, 52, 0.18); /* halo de foco, basado en accent-700 */
--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 150ms var(--ease-standard);
--transition-base: 350ms var(--ease-standard);
--transition-slow: 400ms var(--ease-standard);
/* ------------------------------------------------------------------------
6. LAYOUT — anchos de contenedor y z-index
------------------------------------------------------------------------
Los breakpoints NO pueden usarse dentro de @media como custom properties
(limitación de CSS nativo). Se documentan aquí como referencia única de
verdad y se repiten como valores literales en components.css / layout.css.
--bp-sm: 480px → móvil grande
--bp-md: 768px → tablet
--bp-lg: 1024px → laptop
--bp-xl: 1280px → escritorio
--bp-2xl: 1440px → escritorio grande
-------------------------------------------------------------------- */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1440px;
--container-max: 1240px;
--container-padding-inline: var(--space-5);
--z-dropdown: 10;
--z-sticky: 20;
--z-header: 100;
--z-overlay: 40;
--z-modal: 50;
--z-toast: 60;
}
/* ==========================================================================
7. RESET / NORMALIZE MODERNO
==========================================================================
Basado en enfoques modernos (Josh Comeau / Andy Bell), adaptado al sistema
de tokens de arriba.
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100dvh;
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-medium);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-primary-900);
text-wrap: balance;
}
h1 em, h2 em, h3 em {
font-style: italic;
font-weight: var(--font-weight-medium);
}
p, li, dd {
text-wrap: pretty;
}
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
img {
color: transparent; /* evita ver el texto alt encima del icono roto mientras carga */
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
text-decoration-thickness: from-font;
}
ul[role='list'], ol[role='list'] {
list-style: none;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
/* Estado de foco visible y accesible en toda la interfaz.
Usa --color-accent-dark (no --color-accent): el accent base sobre fondos
claros/blancos da ~2.95:1, por debajo del mínimo 3:1 de WCAG 1.4.11 para
indicadores no textuales. accent-dark (#8c6a34) da ~4.65:1 sobre blanco y
~3.58:1 sobre ink-900, cumpliendo en ambos contextos. */
:focus-visible {
outline: 2px solid var(--color-accent-dark);
outline-offset: 2px;
}
/* Selección de texto con la paleta de marca */
::selection {
background-color: var(--color-accent-light);
color: var(--color-primary-900);
}
/* Respeta la preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Utilidad para saltar navegación (accesibilidad de teclado) */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-toast);
padding: var(--space-2) var(--space-4);
background: var(--color-primary-900);
color: var(--color-text-inverse);
border-radius: var(--radius-sm);
transition: top var(--transition-base);
}
.skip-link:focus-visible {
top: var(--space-4);
}
/* Utilidad visualmente oculta pero accesible para lectores de pantalla */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}