/* ===== Khrom: paleta gris/blanco sobre el tema claro de Gitea ===== */
:root {
  --color-primary: #3f3f46;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #36363c;
  --color-primary-dark-2: #2e2e33;
  --color-primary-dark-3: #27272a;
  --color-primary-dark-4: #202023;
  --color-primary-dark-5: #1a1a1c;
  --color-primary-dark-6: #141416;
  --color-primary-dark-7: #0e0e10;
  --color-primary-light-1: #52525b;
  --color-primary-light-2: #63636b;
  --color-primary-light-3: #71717a;
  --color-primary-light-4: #8a8a93;
  --color-primary-light-5: #a1a1aa;
  --color-primary-light-6: #c4c4c8;
  --color-primary-light-7: #e4e4e7;
  --color-primary-alpha-10: rgba(63,63,70,.10);
  --color-primary-alpha-20: rgba(63,63,70,.20);
  --color-primary-alpha-30: rgba(63,63,70,.30);
  --color-primary-alpha-40: rgba(63,63,70,.40);
  --color-primary-alpha-50: rgba(63,63,70,.50);
  --color-primary-alpha-60: rgba(63,63,70,.60);
  --color-primary-alpha-70: rgba(63,63,70,.70);
  --color-primary-alpha-80: rgba(63,63,70,.80);
  --color-primary-alpha-90: rgba(63,63,70,.90);
  --color-primary-hover: #27272a;
  --color-primary-active: #18181b;

  --color-body: #f4f4f5;
  --color-box-body: #ffffff;
  --color-box-header: #fafafa;
  --color-nav-bg: #ffffff;
  --color-nav-hover-bg: #ececee;
  --color-footer: #ffffff;
  --color-text: #27272a;
  --color-text-light: #52525b;
  --color-text-light-1: #63636b;
  --color-text-light-2: #8a8a93;
  --color-secondary: #e4e4e7;
  --color-input-border: #d4d4d8;
}

/* Oculta el enlace "Ayuda" (documentación de Gitea) de la barra superior */
.navbar a[href*="docs.gitea"],
.navbar a[href*="gitea.com"],
#navbar a[href*="docs.gitea"],
#navbar a[href*="gitea.com"] { display: none !important; }

/* ===== Footer mínimo ===== */
.khrom-footer {
  border-top: 1px solid #e4e4e7; background: #ffffff;
  padding: 16px 24px; color: #8a8a93; font-size: 12px;
  display: flex; justify-content: center;
}
.khrom-footer-inner { display: flex; align-items: center; gap: 8px; }
.khrom-footer img { opacity: .8; }

/* ===== Inicio ===== */
.khrom-home {
  max-width: 1040px; margin: 0 auto; padding: 0 24px 56px; width: 100%;
  color: #27272a;
}
.khrom-card { background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); }

.khrom-hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  padding: 80px 0 64px;
}
.khrom-hero h1 { font-size: 44px; font-weight: 600; letter-spacing: -.03em; margin: 0 0 12px; line-height: 1.1; }
.khrom-logo { display: block; margin: -8px 0 16px -6px; }
.khrom-lead { color: #52525b; font-size: 16px; margin: 0 0 28px; max-width: 440px; }
.khrom-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.khrom-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #52525b;
  border: 1px solid #d4d4d8; background: #ffffff; border-radius: 999px;
  padding: 3px 12px 3px 8px; margin-bottom: 20px;
}
.khrom-dot { width: 7px; height: 7px; border-radius: 50%; background: #71717a; }

.khrom-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; border-radius: 6px; border: 1px solid #d4d4d8;
  background: #ffffff; color: #27272a !important; font-weight: 500; font-size: 14px;
}
.khrom-btn:hover { background: #fafafa; border-color: #c4c4c8; text-decoration: none; }
.khrom-btn.primary { background: #3f3f46; border-color: #3f3f46; color: #ffffff !important; }
.khrom-btn.primary:hover { background: #27272a; }

.khrom-terminal { overflow: hidden; }
.khrom-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #e4e4e7; background: #fafafa; align-items: center; }
.khrom-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d8; }
.khrom-bar span { margin-left: 8px; font-size: 12px; color: #8a8a93; }
.khrom-terminal pre {
  margin: 0; padding: 18px 20px; font: 13px/1.75 ui-monospace, Consolas, "Cascadia Mono", monospace;
  color: #52525b; overflow-x: auto; background: transparent; border: 0;
}
.khrom-terminal .p { color: #8a8a93; user-select: none; }
.khrom-terminal .ok { color: #27272a; font-weight: 600; }

.khrom-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 0; }
.khrom-feature { padding: 22px; }
.khrom-ic {
  width: 36px; height: 36px; border-radius: 8px; background: #ececee;
  display: grid; place-items: center; color: #3f3f46; margin-bottom: 14px;
}
.khrom-feature h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.khrom-feature p { margin: 0; color: #52525b; }

@media (max-width: 860px) {
  .khrom-hero { grid-template-columns: 1fr; padding: 48px 0 40px; gap: 32px; }
  .khrom-hero h1 { font-size: 34px; }
  .khrom-features { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .khrom-home { padding: 0 16px 40px; }
}