/* Aldira — sistema visual de la landing.
   Los tokens salen de la biblioteca canónica de identidad y producto.
   No se escriben hex fuera de este bloque. */

:root {
    /* Tipografía */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Neutros cálidos */
    --surface: #f3f1ed;
    --card: #ffffff;
    --subtle: #f4f2ee;
    --line: #e6e4e0;
    --line-strong: #d3d0ca;
    --ink: #1a1917;
    --ink-muted: #6b6862;
    --ink-light: #9a968e;

    --rail: #1e1c19;
    --rail-ink: #b5b0a6;
    --rail-muted: #9a9387;
    --rail-line: #332f2a;

    /* Interacción: enlaces, foco, selección y señales interactivas. */
    --brand-50: #eef3fa;
    --brand-100: #dbe6f4;
    --brand-200: #b9cde8;
    --brand-500: #3b6fae;
    --brand-600: #2e6bcb;
    --brand-700: #1f4577;
    --brand-900: #16304f;

    /* Semánticos: comprometidos con un significado legal dentro del producto. */
    --positive: #0b5e3c;
    --positive-bg: #e3f3ea;
    --positive-line: #6fbe96;

    --caution: #8a5800;
    --caution-solid: #a66a00;
    --caution-bg: #fbf0dc;
    --caution-line: #ebcb8e;

    --negative: #8e1d17;
    --negative-bg: #fbe7e5;
    --negative-line: #efb4ae;

    /* Terminal: vencido, anulado, publicado. No es error. */
    --terminal: #5e5a54;
    --terminal-bg: #eceae5;

    /* IA: hue reservado, no se usa para nada más. */
    --ai: #6d3bd1;
    --ai-solid: #6d3bd1;
    --ai-bg: #f1eafd;
    --ai-line: #cdb6f5;

    /* Aging */
    --aging-0: #dcdad5;
    --aging-1: #ebcb8e;
    --aging-2: #d99a4e;
    --aging-3: #b8342a;

    /* Comunicación editorial del sitio. Nunca representa un estado del producto. */
    --mk-green: #217346;
    --mk-sprout: #a8d989;
    --mk-green-bg: #eef5e8;
    --mk-copper: #a85a28;
    --mk-copper-light: #efdccb;
    --mk-deep: #1e1c19;
    --mk-on-deep: #f3f1ed;
    --mk-on-deep-muted: #c8c4bc;
    --mk-on-deep-faint: #928e86;

    /* Logotipo */
    --tracking-wordmark: -0.035em;
    --size-wordmark-min: 0.875rem;

    /* Layout */
    --radius-card: 0.75rem;
    --radius-input: 0.5rem;
    --radius-badge: 0.375rem;
    --shadow-focus: 0 0 0 3px rgba(46, 107, 203, 0.28);
    --shadow-card: 0 1px 2px rgba(26, 25, 23, 0.04);
    --shadow-lift: 0 12px 32px rgba(26, 25, 23, 0.08);

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 64px;

    --topbar: 3.5rem;
    --page-gutter: 24px;
    --content-max: 1160px;
}

/* IBM Plex Sans e IBM Plex Mono se cargan desde Google Fonts en el <head> de
   cada página: son las mismas del producto, así que la landing y la app se ven
   iguales sin sumar un paso de build. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

h3 {
    font-size: 1.125rem;
}

p {
    margin: 0;
}

a {
    color: var(--mk-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-input);
}

img,
svg {
    display: block;
}

.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--card);
    padding: var(--space-md) var(--space-lg);
}

.skip-link:focus {
    left: var(--space-lg);
    top: var(--space-lg);
}

/* --- Marca --- */

.brand-lockup {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.brand-lockup:hover {
    text-decoration: none;
}

.brand-lockup svg {
    height: 24px;
    width: auto;
    display: block;
    flex: none;
}

.navbar .brand-lockup svg {
    height: 30px;
}

/* --- Botones --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}

.btn-primary:hover {
    background: var(--terminal);
    border-color: var(--terminal);
}

.btn-secondary {
    background: var(--card);
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-secondary:hover {
    border-color: var(--ink-muted);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
}

.btn-ghost:hover {
    background: var(--subtle);
}

.btn-lg {
    height: 2.75rem;
    padding: 0 1.25rem;
}

.btn-on-deep {
    background: var(--mk-on-deep);
    border-color: var(--mk-on-deep);
    color: var(--mk-deep);
}

.btn-on-deep:hover {
    background: var(--card);
    border-color: var(--card);
}

/* --- Superficies --- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--space-xl);
    box-shadow: var(--shadow-card);
}

.kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.lead {
    font-size: 1.125rem;
    color: var(--ink-muted);
    max-width: 62ch;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Indicadores de estado ---
   El color nunca va solo: cada badge lleva forma y palabra, para que el estado
   sobreviva en escala de grises y con daltonismo rojo-verde. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: var(--radius-badge);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}

.badge svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.badge-positive {
    color: var(--positive);
    background: var(--positive-bg);
    border-color: var(--positive-line);
}

.badge-caution {
    color: var(--caution);
    background: var(--caution-bg);
    border-color: var(--caution-line);
}

.badge-negative {
    color: var(--negative);
    background: var(--negative-bg);
    border-color: var(--negative-line);
}

.badge-terminal {
    color: var(--terminal);
    background: var(--terminal-bg);
    border-color: var(--line-strong);
}

.badge-ai {
    color: var(--ai);
    background: var(--ai-bg);
    border-color: var(--ai-line);
}

.badge-neutral {
    color: var(--ink-muted);
    background: var(--subtle);
    border-color: var(--line);
}