/* KONEKO GIT · Home v3.3 — Forgejo 15 — Scoped to #koneko-git.
   El navbar y los favicons se mantienen en sus archivos independientes. */
#koneko-git {
  --kg-text:#192b43; --kg-muted:#536c86; --kg-muted-2:#668098;
  --kg-accent:#1254ce; --kg-accent-hover:#0b41ad;
  --kg-hero:#eef5ff; --kg-card:#fff; --kg-border:#d9e6f3;
  --kg-shadow:0 16px 48px #274a7812;
  width:100%; color:var(--kg-text); font-family:inherit;
}
#koneko-git *,#koneko-git *::before,#koneko-git *::after {box-sizing:border-box}
#koneko-git a {text-decoration:none}
#koneko-git a:focus-visible {outline:3px solid #70aaff;outline-offset:3px}
#koneko-git .kg-hero {
  position:relative; isolation:isolate; overflow:hidden;
  width:calc(100% - 32px); max-width:1264px; min-height:520px;
  margin:22px auto 0; border-radius:22px;
  border:1px solid var(--kg-border); background:var(--kg-hero);
  box-shadow:var(--kg-shadow);
}
/* Una capa de ilustración de ancho total, no un rectángulo de 833px.
   El alfa sólo se pierde en el espacio vacío a la izquierda, no sobre el gato. */
#koneko-git .kg-art {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-position:right bottom; background-repeat:no-repeat;
  background-size:auto 100%; opacity:1; filter:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 23%,#000 52%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 23%,#000 52%);
}
#koneko-git .kg-art-light {background-image:url('/assets/img/koneko-hero-light.webp')}
#koneko-git .kg-art-dark {display:none;background-image:url('/assets/img/koneko-hero-dark.webp')}
#koneko-git .kg-hero-inner {
  position:relative; z-index:1; min-height:520px; max-width:100%;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(45px,5.5vw,66px) clamp(28px,5.2vw,66px) 27px;
}
#koneko-git .kg-main-copy {width:min(52%,540px)}
#koneko-git .kg-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:11px; line-height:1.5; letter-spacing:.14em;
  text-transform:uppercase; font-weight:750; color:var(--kg-accent);
}
#koneko-git .kg-signal {display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--kg-accent)}
#koneko-git h1 {
  margin:20px 0 8px!important; max-width:600px; color:var(--kg-text)!important;
  font-size:clamp(32px,3.55vw,47px)!important; line-height:1.15!important;
  letter-spacing:-.035em!important; font-weight:650!important;
}
#koneko-git .kg-brand-promise {
  margin:0 0 19px; color:var(--kg-text);
  font-size:clamp(19px,2.05vw,25px); font-weight:450; line-height:1.3;
}
#koneko-git .kg-brand-promise strong {color:var(--kg-accent);font-weight:700}
#koneko-git .kg-lead {max-width:520px;margin:0;color:var(--kg-muted);font-size:14px;line-height:1.75;text-wrap:pretty}
#koneko-git .kg-actions {display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}
#koneko-git .kg-button {
  min-height:44px; display:inline-flex; justify-content:center; align-items:center; gap:10px;
  padding:10px 16px; border:1px solid transparent; border-radius:9px;
  font-size:13px; line-height:1.25; font-weight:700;
  transition:background-color .2s,border-color .2s,transform .2s;
}
#koneko-git .kg-button:hover {transform:translateY(-1px)}
#koneko-git .kg-button-primary {background:var(--kg-accent);color:white!important;box-shadow:0 5px 19px #1254ce26}
#koneko-git .kg-button-primary:hover {background:var(--kg-accent-hover)}
#koneko-git .kg-button-secondary {background:#ffffffb7;border-color:#b7cae1;color:#1b3656!important}
#koneko-git .kg-button-secondary:hover {background:#fff;border-color:#7e9cba}
#koneko-git .kg-login-kflow {display:block;flex:none;width:19px;height:19px;object-fit:contain}
#koneko-git .kg-hero-foot {
  display:flex;align-items:center;gap:9px;
  margin:auto 0 0;padding-top:25px;color:var(--kg-muted-2);font-size:11px;
}
#koneko-git .kg-hero-foot-dot {width:6px;height:6px;flex:none;border-radius:50%;background:#dc9c4f}
#koneko-git .kg-features {max-width:1264px;margin:0 auto;padding:34px 16px 40px}
#koneko-git .kg-section-heading {
  display:grid;grid-template-columns:1.12fr .88fr;align-items:end;gap:30px;
  padding:0 0 20px;
}
#koneko-git .kg-label {font-size:10px;letter-spacing:.16em;font-weight:760;color:var(--kg-accent)}
#koneko-git h2 {
  margin:8px 0 0!important; font-size:clamp(22px,2.45vw,29px)!important;
  line-height:1.24;letter-spacing:-.028em;font-weight:650;color:var(--kg-text)!important;
}
#koneko-git .kg-section-heading p {color:var(--kg-muted);font-size:13px;line-height:1.65;margin:0;max-width:480px}
#koneko-git .kg-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#koneko-git .kg-card {
  background:var(--kg-card);min-width:0;min-height:195px;
  padding:23px 24px;border:1px solid var(--kg-border);border-radius:14px;
}
#koneko-git .kg-icon {display:inline-grid;place-items:center;width:43px;height:43px;border-radius:10px;background:color-mix(in srgb,var(--kg-accent) 11%,transparent);color:var(--kg-accent);margin-bottom:15px}
#koneko-git .kg-icon svg {width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#koneko-git h3 {margin:0 0 8px!important;font-size:15.5px!important;font-weight:680!important;line-height:1.32;color:var(--kg-text)!important}
#koneko-git .kg-card p {margin:0;font-size:12.8px;line-height:1.7;color:var(--kg-muted)}
#koneko-git .kg-colophon {font-size:11px;color:var(--kg-muted-2);text-align:center;margin:24px 0 0}

/* Tema oscuro explícito. Light es la base. */
html[data-theme*="dark"] #koneko-git {
  --kg-text:#eaf1fd;--kg-muted:#b6c9da;--kg-muted-2:#91a6bc;
  --kg-accent:#75acff;--kg-accent-hover:#92beff;
  --kg-hero:#040b15;--kg-border:#2b3b4c;--kg-card:#1b2835;
  --kg-shadow:0 19px 50px #00000028;
}
html[data-theme*="dark"] #koneko-git .kg-art-dark {display:block}
html[data-theme*="dark"] #koneko-git .kg-art-light {display:none}
html[data-theme*="dark"] #koneko-git .kg-button-primary {background:#125bd8}
html[data-theme*="dark"] #koneko-git .kg-button-primary:hover {background:#246dec}
html[data-theme*="dark"] #koneko-git .kg-button-secondary {background:#ffffff08;border-color:#42576f;color:#eef5ff!important}
html[data-theme*="dark"] #koneko-git .kg-button-secondary:hover {background:#ffffff16;border-color:#7490ae}

/* forgejo-auto sigue la preferencia del sistema. */
@media (prefers-color-scheme:dark) {
  html[data-theme*="auto"] #koneko-git {
    --kg-text:#eaf1fd;--kg-muted:#b6c9da;--kg-muted-2:#91a6bc;
    --kg-accent:#75acff;--kg-accent-hover:#92beff;
    --kg-hero:#040b15;--kg-border:#2b3b4c;--kg-card:#1b2835;
    --kg-shadow:0 19px 50px #00000028;
  }
  html[data-theme*="auto"] #koneko-git .kg-art-dark {display:block}
  html[data-theme*="auto"] #koneko-git .kg-art-light {display:none}
  html[data-theme*="auto"] #koneko-git .kg-button-primary {background:#125bd8}
  html[data-theme*="auto"] #koneko-git .kg-button-primary:hover {background:#246dec}
  html[data-theme*="auto"] #koneko-git .kg-button-secondary {background:#ffffff08;border-color:#42576f;color:#eef5ff!important}
}

/* 881–1180: dos columnas, sin superponer los párrafos sobre Koneko. */
@media (min-width:881px) and (max-width:1180px) {
  #koneko-git .kg-hero {min-height:505px}
  #koneko-git .kg-hero-inner {min-height:505px;padding:42px 34px 26px}
  #koneko-git .kg-main-copy {width:min(52%,480px)}
  #koneko-git .kg-art {background-size:auto 100%}
  #koneko-git h1 {font-size:clamp(31px,3.75vw,42px)!important}
  #koneko-git .kg-brand-promise {font-size:clamp(19px,2.3vw,24px)}
  #koneko-git .kg-lead {font-size:13.5px}
}

/* <= 880: se apila el texto y el arte; el WebP se ancla a la derecha,
   no se centra con background-size:contain (que generaba huecos laterales). */
@media (max-width:880px) {
  #koneko-git .kg-hero {
    display:flex;flex-direction:column;min-height:0;
    width:calc(100% - 20px);margin:12px auto 0;border-radius:19px;
  }
  #koneko-git .kg-hero-inner {display:contents}
  #koneko-git .kg-main-copy {
    position:relative;z-index:1;order:0;width:100%;margin:0;
    padding:37px clamp(22px,5vw,46px) 0;
  }
  #koneko-git .kg-lead {max-width:62ch}
  #koneko-git h1 {font-size:clamp(32px,5vw,41px)!important}
  #koneko-git .kg-art {
    position:relative;inset:auto;z-index:0;order:1;
    flex:none;width:100%;height:clamp(295px,53vw,435px);
    margin:8px 0 0; background-position:right bottom;
    background-size:auto 100%;
    /* Sólo se desvanece la zona de fondo vacía a la izquierda. */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%);
    mask-image:linear-gradient(to right,transparent 0%,#000 26%);
  }
  /* Transición superior de 8%: elimina el borde horizontal sin tocar orejas. */
  #koneko-git .kg-art-light {
    background-image:linear-gradient(to bottom,var(--kg-hero) 0%,transparent 8%),url('/assets/img/koneko-hero-light.webp');
    background-size:100% 100%,auto 100%;
  }
  html[data-theme*="dark"] #koneko-git .kg-art-dark {
    background-image:linear-gradient(to bottom,var(--kg-hero) 0%,transparent 8%),url('/assets/img/koneko-hero-dark.webp');
    background-size:100% 100%,auto 100%;
  }
  @media (prefers-color-scheme:dark) {
    html[data-theme*="auto"] #koneko-git .kg-art-dark {
      background-image:linear-gradient(to bottom,var(--kg-hero) 0%,transparent 8%),url('/assets/img/koneko-hero-dark.webp');
      background-size:100% 100%,auto 100%;
    }
  }
  #koneko-git .kg-hero-foot {
    position:relative;z-index:1;order:2;margin:0;padding:8px clamp(22px,5vw,46px) 22px;
  }
  #koneko-git .kg-features {padding:29px 18px 35px}
  #koneko-git .kg-section-heading {grid-template-columns:1fr;gap:12px}
  #koneko-git .kg-cards {grid-template-columns:1fr;gap:12px}
  #koneko-git .kg-card {min-height:0;display:grid;grid-template-columns:44px 1fr;column-gap:13px;align-items:start;padding:19px}
  #koneko-git .kg-card .kg-icon {grid-row:1 / 3;margin:0}
  #koneko-git .kg-card h3 {margin:2px 0 6px!important}
  #koneko-git .kg-card p {grid-column:2}
}

@media (max-width:520px) {
  #koneko-git .kg-main-copy {padding:28px 21px 0}
  #koneko-git .kg-eyebrow {font-size:10px;letter-spacing:.11em}
  #koneko-git h1 {font-size:32px!important}
  #koneko-git .kg-brand-promise {font-size:20px}
  #koneko-git .kg-lead {font-size:13.4px;line-height:1.68}
  #koneko-git .kg-actions {gap:9px;margin-top:24px}
  #koneko-git .kg-button {font-size:12.3px;padding:9px 12px;gap:8px}
  #koneko-git .kg-art {height:clamp(235px,65vw,330px);margin-top:8px;mask-image:none;-webkit-mask-image:none}
  #koneko-git .kg-hero-foot {padding:10px 21px 21px;font-size:10.6px}
}
@media (prefers-reduced-motion:reduce) {
  #koneko-git .kg-button {transition:none}
  #koneko-git .kg-button:hover {transform:none}
}