/* KlubKore — landing v7. Tokens, reset, rejillas con filete y estados.
   La maquetación va inline en index.html. */
:root { --ink:#04070D; --ink-2:#080C15; --paper:#F4F1EA; --blue:#2563EB; }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--ink); color:#E9EEF8; font-family:Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  html { scroll-behavior:smooth; }
  [id] { scroll-margin-top:76px; }
  a { color:#8FB2FF; text-decoration:none; transition:color .16s ease; }
  a:hover { color:#fff; }
  a:focus-visible, button:focus-visible { outline:1px solid #5B8CFF; outline-offset:4px; }
  .kk-navlink { position:relative; }
  .kk-navlink::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:currentColor; transition:right .28s cubic-bezier(.16,.8,.24,1); }
  .kk-navlink:hover::after { right:0; }
  .kk-cta { transition:background .18s ease, transform .18s cubic-bezier(.16,.8,.24,1), box-shadow .18s ease; }
  .kk-cta:hover { background:#2E6BEE; transform:translateY(-1px); }
  .kk-ghost { transition:border-color .18s ease, color .18s ease; }
  .kk-ghost:hover { border-color:rgba(255,255,255,.6); }
  .kk-row { transition:background .18s ease; }
  .kk-row:hover { background:rgba(140,170,235,.045); }

/* Rejillas con filetes de 1px.
   Los recuentos de columna son explícitos y siempre divisores del número de
   celdas (5→5|1, 4→4|2|1, 3→3|1, 2→2|1): auto-fit dejaba filas huérfanas.
   La línea va como sombra INSET, que se pinta sobre el fondo de la propia
   celda y por tanto no puede taparla la celda siguiente. */
.kk-g { display: grid; }
.kk-g > * { box-shadow: inset 1px 0 0 var(--l), inset 0 1px 0 var(--l); min-width: 0; }
.kk-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kk-g5 > :nth-child(5n+1) { box-shadow: inset 0 1px 0 var(--l); }
.kk-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kk-g4 > :nth-child(4n+1) { box-shadow: inset 0 1px 0 var(--l); }
.kk-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kk-g3 > :nth-child(3n+1) { box-shadow: inset 0 1px 0 var(--l); }
.kk-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-g2 > :nth-child(2n+1) { box-shadow: inset 0 1px 0 var(--l); }
.kk-g > .kk-accent { box-shadow: inset 2px 0 0 var(--blue), inset 0 1px 0 var(--l); }

@media (max-width: 1180px) {
  .kk-g5 { grid-template-columns: minmax(0, 1fr); }
  .kk-g5 > * { box-shadow: inset 0 1px 0 var(--l); }
}
@media (max-width: 1040px) {
  .kk-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-g4 > :nth-child(4n+1) { box-shadow: inset 1px 0 0 var(--l), inset 0 1px 0 var(--l); }
  .kk-g4 > :nth-child(2n+1) { box-shadow: inset 0 1px 0 var(--l); }
}
@media (max-width: 620px) {
  .kk-g4 { grid-template-columns: minmax(0, 1fr); }
  .kk-g4 > * { box-shadow: inset 0 1px 0 var(--l); }
}
@media (max-width: 940px) {
  .kk-g3 { grid-template-columns: minmax(0, 1fr); }
  .kk-g3 > * { box-shadow: inset 0 1px 0 var(--l); }
}
@media (max-width: 780px) {
  .kk-g2 { grid-template-columns: minmax(0, 1fr); }
  .kk-g2 > * { box-shadow: inset 0 1px 0 var(--l); }
}
@media (max-width: 700px) {
  .kk-headnav { display: none !important; }
}
  @keyframes kkBreathe { 0%,100%{opacity:.22} 50%{opacity:.8} }
  @media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} }