/*  ============================================================
    KaiDoc Sistema C — Base (reset + tipografía + utilidades)
    ----------------------------------------------------------------
    Fuente de verdad: STYLEGUIDE.md §4 (tipografía), §8 (geometría),
    §13 (motion), §14 (responsive).
    Depende de: kd-tokens.css
    NO contiene estilos de componentes específicos (eso vive en
    kd-components.css).
    ============================================================ */


/* ------------------------------------------------------------
   1. @font-face — Neo Sans Std (servida localmente)
   STYLEGUIDE.md §4.1
   Los archivos reales viven en /public/font/ (singular, kebab-case).
   Solo hay 2 weights: medium (500) y black (900). El 700 mapea al
   black (= 900 visual) por proximidad — el proyecto históricamente
   no licenció un "bold real". Bloque 8 de Sprint 2.3.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Neo Sans Std';
  font-weight: 500;
  font-style: normal;
  src: url('/font/neo-sans-std-medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Neo Sans Std';
  font-weight: 700;
  font-style: normal;
  /* 700 mapea a black por falta de archivo bold dedicado. Sicap
     puede agregar neo-sans-std-bold.woff2 si llega un día. */
  src: url('/font/neo-sans-std-black.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Neo Sans Std';
  font-weight: 900;
  font-style: normal;
  src: url('/font/neo-sans-std-black.woff2') format('woff2');
  font-display: swap;
}


/* ------------------------------------------------------------
   2. Reset minimal
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }


/* ------------------------------------------------------------
   3. Body base
   ------------------------------------------------------------ */
body {
  font-family: var(--kd-font);
  font-size: var(--kd-text-body);
  font-weight: 500;
  background: var(--kd-base);
  color: var(--kd-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* ------------------------------------------------------------
   4. Contenedor y secciones
   STYLEGUIDE.md §5, §9.1
   ------------------------------------------------------------ */
.kd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--kd-space-5);
}

.kd-section {
  padding: var(--kd-space-12) 0;
  position: relative;
}
@media (max-width: 768px) {
  .kd-section { padding: var(--kd-space-8) 0; }
}

.kd-section-dark {
  background:
    linear-gradient(var(--kd-grid) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--kd-grid) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--kd-base);
  color: var(--kd-text);
}

.kd-section-light {
  background: var(--kd-paper);
  color: var(--kd-ink);
}


/* ------------------------------------------------------------
   5. Tipografía — escalas y modificadores
   STYLEGUIDE.md §4.3, §4.5
   ------------------------------------------------------------ */
.kd-h1 {
  font-size: var(--kd-text-hero);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.kd-h2 {
  font-size: var(--kd-text-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.kd-h3 {
  font-size: var(--kd-text-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.kd-body-lg {
  font-size: var(--kd-text-body-lg);
  line-height: 1.55;
  color: var(--kd-text-muted);
  max-width: 62ch;
}

.kd-body {
  font-size: var(--kd-text-body);
  line-height: 1.55;
  color: var(--kd-text-muted);
  max-width: 62ch;
}

/* Texto destacado dentro de titulares. STYLEGUIDE.md §3.1 (cyan accent) */
.kd-mark {
  color: var(--kd-cyan);
  font-style: italic;
}

/* En secciones light, kd-body y kd-body-lg deben usar tinta navy */
.kd-section-light .kd-body,
.kd-section-light .kd-body-lg { color: var(--kd-ink-muted); }
.kd-section-light .kd-mark    { color: var(--kd-purple); }


/* ------------------------------------------------------------
   6. Eyebrow
   STYLEGUIDE.md §12.3
   ------------------------------------------------------------ */
.kd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kd-space-2);
  font-size: var(--kd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kd-purple);
  line-height: 1;
}

.kd-eyebrow-pill {
  padding: 6px 14px;
  border: 1px solid rgba(195, 58, 252, 0.4);
  border-radius: var(--kd-radius-pill);
  background: rgba(195, 58, 252, 0.06);
}

.kd-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--kd-purple);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   7. Botones
   STYLEGUIDE.md §8 (clip-path obligatorio en primary)
   ------------------------------------------------------------ */
.kd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kd-space-2);
  font-family: var(--kd-font);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 28px;
  letter-spacing: -0.005em;
  transition: background var(--kd-duration-base) var(--kd-ease),
              color var(--kd-duration-base) var(--kd-ease),
              transform var(--kd-duration-base) var(--kd-ease),
              border-color var(--kd-duration-base) var(--kd-ease);
}

/* Primary: paralelogramo recortado (firma del Mago). Inclinación 8%. */
.kd-btn-primary {
  background: var(--kd-purple);
  color: var(--kd-paper-pure);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  padding: 14px 36px;
  /* sin border-radius — el styleguide es explícito */
}
.kd-btn-primary:hover {
  /* Brightness en lugar de un segundo token de purple. STYLEGUIDE.md
     no contempla --kd-purple-hover; derivamos el estado on the fly. */
  filter: brightness(1.1);
  color: var(--kd-paper-pure);
  transform: translateY(-1px);
}

/* Secondary: rectangular con borde sutil */
.kd-btn-secondary {
  background: rgba(232, 240, 255, 0.02);
  color: var(--kd-text);
  border: 1px solid var(--kd-line-strong);
  border-radius: var(--kd-radius-sm);
}
.kd-btn-secondary:hover {
  border-color: var(--kd-cyan);
  background: rgba(164, 240, 254, 0.05);
  color: var(--kd-text);
}

/* Link estilo "ver más", con flecha animada */
.kd-btn-link {
  color: var(--kd-cyan);
  font-weight: 500;
  padding: 14px 0;
}
.kd-btn-link::after {
  content: '→';
  margin-left: var(--kd-space-1);
  transition: transform var(--kd-duration-fast) var(--kd-ease);
}
.kd-btn-link:hover { color: var(--kd-paper-pure); }
.kd-btn-link:hover::after { transform: translateX(4px); }

/* En secciones light, kd-btn-link cambia color */
.kd-section-light .kd-btn-link { color: var(--kd-purple); }
.kd-section-light .kd-btn-link:hover { color: var(--kd-navy); }


/* ------------------------------------------------------------
   8. Scroll reveal (estados iniciales)
   STYLEGUIDE.md §13.1
   El IntersectionObserver agrega .is-visible (kd-marketing.js).
   ------------------------------------------------------------ */
.kd-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--kd-ease),
              transform 0.6s var(--kd-ease);
}
.kd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Si no hay JS, no dejes el contenido oculto. */
.no-js .kd-reveal { opacity: 1; transform: none; }


/* ------------------------------------------------------------
   9. Reduced motion
   STYLEGUIDE.md §13.3
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kd-reveal { opacity: 1; transform: none; }
}