/* ═══ Tokens del DS Kilqay ═══════════════════════════════════════════════
     Valores copiados de tokens/colors.css, typography.css y shape.css del
     skill kilqay-design, compartidos por la landing y fundadores. Ningún
     color literal vive fuera de este bloque. */
  :root {
    /* Color §04 */
    --ink: #111111;
    --signal: #2A9D8F;
    --signal-strong: #217E72;
    --signal-text: #1B6B61;
    --soft: #E4F5F2;
    --base: #F8FAFC;
    --white: #FFFFFF;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --error: #B91C1C;
    /* Sobre fondo tinta — los únicos valores con alfa del sistema */
    --on-ink-text: var(--gray-200);
    --on-ink-muted: var(--gray-400);
    --on-ink-border: rgba(255, 255, 255, 0.18);
    --on-ink-border-soft: rgba(255, 255, 255, 0.14);
    --on-ink-border-strong: rgba(255, 255, 255, 0.25);
    --on-ink-divider: rgba(255, 255, 255, 0.10);
    --focus-ring: 0 0 0 3px rgba(42, 157, 143, 0.45);
    /* Motivo gráfico §06: el isotipo recortado, 30% sobre tinta */
    --motif-on-light: 0.06;
    --motif-on-ink: 0.3;
    /* Etiquetas sobre tinta (mockup sellado home v2): 11,5:1 sobre --ink */
    --signal-on-ink: #8AD9CC;

    /* Tipografía §05 — Montserrat decide, Lato explica */
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --overline-ls: 0.08em;

    /* Forma y espacio — flat: cero sombras, cero gradientes */
    --radius-control: 4px;
    --radius-card: 8px;
    --radius-pill: 999px;
    --control-height: 44px;
    --control-height-lg: 48px;

    /* Rejilla de la landing */
    --content-max: 1200px;
    --gutter: 40px;
    --gutter-sm: 24px;
    --nav-height: 72px;
    --nav-height-sm: 60px;
  }

body {
    margin: 0;
    /* Reserva el alto del nav fijo: con la página en el tope nada se mueve. */
    padding-top: var(--nav-height);
    background: var(--base);
    font-family: var(--font-body);
    color: var(--ink);
  }

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

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); }

p { margin: 0; }

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

a:hover { color: var(--signal-strong); text-decoration: underline; }

a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control);
  }

.skip-link { position: absolute; left: -9999px; top: 8px; }

.skip-link:focus {
    position: fixed; left: 8px; top: 8px; z-index: 70;
    background: var(--white); color: var(--ink); padding: 10px 16px;
    border-radius: var(--radius-control); font: 600 14px var(--font-display);
    text-decoration: none; box-shadow: var(--focus-ring);
  }

.band--white { background: var(--white); }

.band--base { background: var(--base); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.btn--primary {
    height: var(--control-height-lg); padding: 0 28px;
    background: var(--signal); color: var(--white); font: 700 19px var(--font-display);
  }

.btn--primary:hover { background: var(--signal-strong); color: var(--white); }

.nav-links a.btn--nav, .nav-mobile-panel a.btn--nav { color: var(--ink); }

.nav-links a.btn--nav:hover, .nav-mobile-panel a.btn--nav:hover { background: var(--gray-100); color: var(--ink); }

.check-row + .check-row { margin-top: 14px; }

.check-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--signal-text); stroke-width: 1.5; }

.check-icon--no { stroke: var(--gray-400); }

.check-text { font-size: 16px; line-height: 1.5; }

.check-text--muted { color: var(--gray-600); }

.card--base { background: var(--base); }

.card-title { margin: 0; font: 700 18px var(--font-display); }

.card-text { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--gray-600); }

.nav-wrap.is-scrolled::after { display: block; }

.nav {
    max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; height: var(--nav-height); padding: 0 var(--gutter);
  }

.nav-logo img { height: 28px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 24px; }

.nav-links a { font: 600 14px var(--font-display); color: var(--white); }

.nav-burger { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; }

.nav-mobile-panel {
    display: flex; flex-direction: column; background: var(--ink);
    position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 60;
    max-height: calc(100vh - var(--nav-height)); overflow-y: auto;
  }

.nav-mobile-panel a.btn--nav { margin: 12px var(--gutter-sm) 16px; border-top: none; padding: 0 20px; }

.hero-sub { margin: 24px 0 0; font-size: 19px; line-height: 1.55; color: var(--gray-600); max-width: 540px; text-wrap: pretty; }

.fit-card { border: 1px solid var(--gray-200); border-radius: var(--radius-card); padding: 32px; background: var(--white); }

.fit-card h3 { margin: 0 0 20px; font: 700 18px var(--font-display); }

.foot .wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* Enlaces dentro de una frase del pie: el color solo no los distingue del
   texto (WCAG 1.4.1). */
.foot .wrap > span:first-child a { text-decoration: underline; }