:root{
  --noche:#0b1130;
  --tinta:#141b45;
  --panel:#1d2556;
  --linea:#303a78;
  --texto:#f4f1ff;
  --suave:#aab1d6;
  --rosa:#ff3286;
  --rosa-hondo:#d81b6a;
  --menta:#18eab6;
  --lima:#dcff00;
  --ancho:1020px;
  --radio:14px;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --lectura:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dato:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--noche);
  color:var(--texto);
  font-family:var(--lectura);
  font-size:1.125rem;
  line-height:1.75;
  overflow-wrap:anywhere;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--menta);text-underline-offset:3px}
a:hover{color:var(--lima)}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.16;letter-spacing:-0.02em;margin:0}
h1{font-size:clamp(2rem,5.2vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.6vw,2.35rem);font-weight:700;margin-bottom:.9rem}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-0.01em;margin:1.6rem 0 .45rem}
p{margin:0 0 1.15rem}
strong{color:#fff}

/* contenedor comun del sitio */
main{width:min(100% - 2.2rem,var(--ancho));margin-inline:auto}
.kn-marco{width:100%;margin-inline:0}

/* cabecera */
.kn-tope{position:sticky;top:0;z-index:50;background:rgba(11,17,48,.96);border-bottom:1px solid var(--linea);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kn-tope-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px;position:relative;width:min(100% - 2.2rem,var(--ancho));margin-inline:auto}
.kn-sello{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-0.03em;color:var(--texto);text-decoration:none;display:inline-flex;gap:.6rem;min-height:48px;align-items:center;flex-shrink:0}
.kn-sello-logo{width:34px;height:34px;flex-shrink:0;border-radius:8px;display:block;transition:transform .2s ease,filter .2s ease}
.kn-sello:hover .kn-sello-logo{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(255,50,134,.5))}
.kn-sello span{display:inline-flex;align-items:baseline;gap:.15rem}
.kn-sello b{color:var(--rosa)}
.kn-sello i{font-style:normal;font-size:.72rem;font-family:var(--dato);color:var(--suave);letter-spacing:.06em;margin-left:.4rem;text-transform:uppercase}
.kn-ruta{display:flex;gap:.25rem;align-items:center}
.kn-ruta a{color:var(--suave);text-decoration:none;font-weight:600;font-size:.9rem;padding:.45rem .65rem;border-radius:8px;min-height:38px;display:inline-flex;align-items:center;transition:all .15s ease;white-space:nowrap}
.kn-ruta a:hover{color:var(--texto);background:var(--tinta)}
.kn-ruta a[aria-current="page"]{color:var(--lima);background:rgba(220,255,0,.08);font-weight:700}
.kn-tope-cta{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rosa),var(--rosa-hondo));color:#fff;font:700 .92rem var(--display);text-decoration:none;padding:.45rem 1.1rem;min-height:40px;border-radius:9px;box-shadow:0 0 14px rgba(255,50,134,.35);transition:transform .14s ease,box-shadow .14s ease;white-space:nowrap;flex-shrink:0}
.kn-tope-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 0 20px rgba(255,50,134,.55)}
.kn-tope-derecha{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;min-height:40px;background:var(--tinta);border:1px solid var(--linea);border-radius:9px;color:var(--texto);font:600 .88rem var(--lectura);padding:0 .75rem;cursor:pointer;align-items:center;gap:.45rem}
.nav-toggle:hover{border-color:var(--menta)}
.nav-toggle-icono{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle-icono span{display:block;height:2px;background:var(--texto);border-radius:1px}
.kn-ruta-cta-movil{display:none}

/* boton de salida */
.kn-ir{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:.85rem 1.5rem;
  background:var(--rosa);color:#fff;
  font:700 1.05rem var(--display);letter-spacing:-0.01em;text-decoration:none;text-align:center;
  border-radius:var(--radio);
  box-shadow:5px 5px 0 var(--menta);
  transition:transform .14s ease,box-shadow .14s ease;
  position:relative;overflow:hidden;
}
.kn-ir::after{
  content:"";position:absolute;top:-50%;left:-60%;width:35%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(25deg);
  animation:kn-shimmer 4.5s infinite cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
@keyframes kn-shimmer{
  0%, 65%{left:-60%}
  100%{left:140%}
}
.kn-ir:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lima)}
.kn-ir:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--menta)}
.kn-ir-fino{min-height:48px;padding:.6rem 1.05rem;font-size:.95rem;box-shadow:3px 3px 0 var(--menta)}
.kn-nota-ir{font-size:.84rem;color:var(--suave);margin:.9rem 0 0}

/* portada */
.kn-portada{padding:clamp(2rem,5vw,3.8rem) 0 clamp(1.5rem,3vw,2.5rem);position:relative;overflow:hidden}
.kn-portada::before{content:"";position:absolute;inset:auto -10% -55% 35%;height:120%;background:radial-gradient(closest-side,rgba(255,50,134,.22),transparent 70%);pointer-events:none}
.kn-portada-rejilla{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(1.4rem,4vw,3.4rem);align-items:center;position:relative}
.kn-portada h1 em{font-style:normal;color:var(--lima)}
.kn-entrada{font-size:1.2rem;line-height:1.7;color:#dfe2f7;margin:1.15rem 0 1.5rem}
.kn-fecha{font-family:var(--dato);font-size:.8rem;color:var(--suave);letter-spacing:.02em;margin:0 0 .9rem}
.kn-fecha time{color:var(--menta)}

/* hero visual & cupon */
.kn-hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.kn-hero-arte{
  width:100%;max-width:390px;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:24px;
  filter:drop-shadow(0 16px 40px rgba(255,50,134,.35));
  margin-bottom:-60px;
  position:relative;z-index:1;
  mask-image:linear-gradient(to bottom, black 72%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 72%, transparent 100%);
}
.kn-cupon{background:var(--lima);color:#10142e;border-radius:18px;padding:1.5rem 1.4rem 1.3rem;position:relative;transform:rotate(-2deg);box-shadow:0 22px 50px rgba(0,0,0,.45);z-index:2;width:100%;max-width:400px}
.kn-cupon::before,.kn-cupon::after{content:"";position:absolute;top:58%;width:26px;height:26px;border-radius:50%;background:var(--noche)}
.kn-cupon::before{left:-13px}
.kn-cupon::after{right:-13px}
.kn-cupon-rotulo{font:700 .76rem var(--dato);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
.kn-cupon-cifra{font:800 clamp(2.5rem,7vw,4rem)/.95 var(--display);letter-spacing:-0.04em;margin:0}
.kn-cupon-cifra small{display:block;font-size:.34em;letter-spacing:-0.01em;font-weight:700;margin-bottom:.3rem}
.kn-cupon-pie{border-top:2px dashed rgba(16,20,46,.45);margin:1.2rem 0 0;padding-top:.9rem;font-weight:600;font-size:.95rem}
.kn-cupon-pie span{display:block;font:500 .78rem var(--dato);margin-top:.25rem}

/* tramos */
.kn-tramo{padding:clamp(1.8rem,4vw,3rem) 0;border-top:1px solid var(--linea)}
.kn-tramo-tinta{
  background:var(--tinta);
  border-radius:18px;
  border:1px solid var(--linea);
  padding:clamp(1.5rem,4vw,2.5rem);
  margin:1.6rem 0;
}
.kn-texto{max-width:100%}
.kn-marco.kn-texto{max-width:100%;width:100%}
.kn-marco.kn-texto > *{max-width:100%}
.kn-doble{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.2rem,4vw,3rem);align-items:start}
.kn-rotulo{font:700 1.02rem var(--display);color:var(--lima);margin:0 0 .35rem;letter-spacing:-0.01em}

/* tablas */
.kn-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);margin:1.2rem 0 1.4rem;background:var(--tinta)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.97rem}
caption{text-align:left;padding:.85rem 1rem;font:600 .82rem var(--dato);color:var(--suave);letter-spacing:.03em}
th,td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--linea)}
th{font:700 .8rem var(--dato);letter-spacing:.06em;text-transform:uppercase;color:var(--menta);background:rgba(24,234,182,.06)}
td:first-child{font-weight:600;color:#fff}
.kn-si{color:var(--menta);font-weight:700}
.kn-no{color:#ff9bc3;font-weight:700}

/* pasos */
.kn-pasos{list-style:none;counter-reset:paso;padding:0;margin:1.3rem 0;display:grid;gap:.75rem}
.kn-pasos li{counter-increment:paso;position:relative;padding:1rem 1rem 1rem 4rem;background:var(--panel);border-radius:var(--radio);border-left:4px solid var(--rosa)}
.kn-pasos li::before{content:counter(paso);position:absolute;left:1rem;top:.75rem;font:800 1.9rem var(--display);color:var(--lima)}
.kn-lista{padding-left:1.15rem;margin:.6rem 0 1.2rem}
.kn-lista li{margin-bottom:.5rem}
.kn-lista li::marker{color:var(--rosa)}

/* a favor / en contra */
.kn-balanza{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.3rem 0}
.kn-plato{background:var(--panel);border-radius:var(--radio);padding:1.15rem 1.2rem;border-top:4px solid var(--menta)}
.kn-plato-contra{border-top-color:var(--rosa)}

/* aviso y confianza */
.kn-aviso{border:1px solid var(--linea);border-left:4px solid var(--lima);border-radius:var(--radio);padding:1.1rem 1.2rem;background:rgba(220,255,0,.05);margin:1.3rem 0}
.kn-aviso p:last-child{margin-bottom:0}

/* glosario */
.kn-glosa{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem;margin:1.2rem 0}
.kn-glosa div{background:var(--panel);border-radius:var(--radio);padding:1rem 1.1rem}
.kn-glosa dt{font:700 1rem var(--display);color:var(--lima)}
.kn-glosa dd{margin:.3rem 0 0;font-size:.95rem;color:#dfe2f7}

/* imagenes */
.kn-tira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:1.4rem 0}
.kn-tira figure,.kn-lamina{margin:0}
.kn-tira img,.kn-lamina img{aspect-ratio:44/59;object-fit:cover;border-radius:12px;width:100%;border:1px solid var(--linea)}
.kn-tira figcaption,.kn-lamina figcaption{font-size:.82rem;color:var(--suave);margin-top:.45rem}
.kn-lamina{max-width:300px}

/* pestanas de filtro de juegos */
.kn-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 .8rem}
.kn-tab-btn{
  background:var(--panel);border:1px solid var(--linea);color:var(--suave);
  padding:.55rem 1rem;border-radius:10px;font:600 .92rem var(--lectura);
  cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  transition:all .18s ease;min-height:44px;
}
.kn-tab-btn:hover{color:var(--texto);border-color:var(--menta)}
.kn-tab-btn.activo{
  background:var(--tinta);color:#fff;border-color:var(--rosa);
  box-shadow:0 0 16px rgba(255,50,134,.25);
}
.kn-tab-cont{
  font-family:var(--dato);font-size:.78rem;padding:.15rem .45rem;
  border-radius:6px;background:rgba(255,255,255,.08);color:var(--menta);font-weight:700;
}

/* grilla de juegos */
.game-grid-kona{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1.4rem 0;overflow-wrap:anywhere}
.game-grid-kona article{
  background:var(--panel);border-radius:var(--radio);padding:.75rem .75rem 1rem;
  display:flex;flex-direction:column;gap:.5rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  border:1px solid transparent;
}
.game-grid-kona article:hover{
  transform:translateY(-4px);border-color:var(--rosa);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.game-grid-kona article[hidden]{display:none !important}
.game-grid-kona img{aspect-ratio:44/59;object-fit:cover;border-radius:10px;width:100%}
.game-grid-kona h3,.game-grid-kona .card-title{margin:.3rem 0 0;font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-0.01em;line-height:1.25}
.game-grid-kona a{display:block}

/* metodos de pago visuales */
.kn-metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.4rem 0}
.kn-metodo-tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s ease}
.kn-metodo-tarjeta:hover{border-color:var(--menta)}
.kn-metodo-icono{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--tinta);border:1px solid var(--linea);font-weight:800;font-size:1.1rem;color:var(--menta)}
.kn-metodo-titulo{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--texto);margin:.2rem 0 0}
.kn-metodo-detalle{font-size:.85rem;color:var(--suave);margin:0}
.kn-metodo-badge{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:6px;background:rgba(24,234,182,.12);color:var(--menta);margin-top:.4rem}

/* calculadora */
.kn-calc{background:var(--panel);border-radius:18px;padding:1.4rem;border:1px solid var(--linea);margin:1.4rem 0}
.kn-calc label{display:block;font-weight:600;margin-bottom:.5rem}
.kn-calc input[type=range]{width:100%;accent-color:var(--rosa);min-height:44px}
.kn-calc input[type=number]{width:100%;min-height:52px;background:var(--noche);border:1px solid var(--linea);border-radius:10px;color:var(--texto);font:600 1.15rem var(--dato);padding:.4rem .8rem}
.kn-calc-salida{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.1rem}
.kn-calc-salida div{background:var(--noche);border-radius:12px;padding:.8rem .9rem}
.kn-calc-salida span{display:block;font:500 .74rem var(--dato);color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
.kn-calc-salida output{font:800 1.35rem var(--display);color:var(--lima)}
.kn-calc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

/* cierre con boton */
.kn-cierre{background:linear-gradient(120deg,var(--panel),#2a1650);border-radius:22px;padding:clamp(1.3rem,4vw,2.2rem);display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:1.2rem;align-items:center;border:1px solid var(--linea)}
.kn-cierre p{margin:0;color:#dfe2f7}
.kn-cierre .kn-rotulo{font-size:1.35rem;color:var(--texto);margin-bottom:.35rem}

/* enlaces internos */
.kn-puentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;padding:0;margin:1.1rem 0 0;list-style:none}
.kn-puentes a{display:flex;flex-direction:column;gap:.2rem;background:var(--panel);border-radius:var(--radio);padding:.95rem 1.05rem;text-decoration:none;color:var(--texto);font-weight:700;min-height:48px;border:1px solid transparent}
.kn-puentes a:hover{border-color:var(--menta)}
.kn-puentes small{color:var(--suave);font-weight:500;font-size:.85rem}

.kn-migas{font:500 .8rem var(--dato);color:var(--suave);padding:1rem 0 0}
.kn-migas a{color:var(--suave)}

/* pie */
.kn-pie{border-top:1px solid var(--linea);padding:2.2rem 0 6.5rem;background:#080d27;font-size:.95rem;color:#cdd2ee}
.kn-pie-rejilla{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;width:min(100% - 2.2rem,var(--ancho));margin-inline:auto}
.kn-pie-aviso{font-size:1rem;line-height:1.6;color:var(--texto);border-left:4px solid var(--rosa);padding-left:1rem}
.kn-pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.kn-pie ul a{display:inline-flex;align-items:center;min-height:44px;color:#cdd2ee}
.kn-edad{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--rosa);border-radius:50%;font:800 .95rem var(--display);color:var(--texto);margin-right:.7rem;vertical-align:middle}

/* barra fija movil */
.kn-barra{display:none}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .kn-tope-cta{display:none}
  .kn-ruta{
    display:none;position:absolute;left:0;right:0;top:66px;
    background:rgba(11,17,48,.98);border-bottom:2px solid var(--rosa);
    flex-direction:column;align-items:stretch;padding:.9rem 1.1rem 1.3rem;
    max-height:calc(100dvh - 66px);overflow-y:auto;
    box-shadow:0 22px 45px rgba(0,0,0,.75);z-index:90;gap:.35rem;
  }
  nav[data-open="1"]{display:flex}
  .kn-ruta a{
    padding:.75rem 1rem;font-size:1rem;border-radius:10px;
    background:var(--tinta);border:1px solid var(--linea);
  }
  .kn-ruta a:hover,.kn-ruta a[aria-current="page"]{
    border-color:var(--menta);color:var(--texto);
  }
  .kn-ruta-cta-movil{
    display:flex;margin-top:.5rem;padding-top:.8rem;border-top:1px solid var(--linea);
  }
  .kn-ruta-cta-movil .kn-ir{width:100%;min-height:48px}
  .kn-portada-rejilla,.kn-doble,.kn-cierre,.kn-pie-rejilla{grid-template-columns:minmax(0,1fr)}
  .kn-cupon{transform:none;max-width:420px;margin-inline:auto}
  .kn-hero-arte{max-width:320px;margin-bottom:-45px}
  .kn-balanza,.kn-calc-campos{grid-template-columns:minmax(0,1fr)}
  .kn-calc-salida{grid-template-columns:minmax(0,1fr)}
  .kn-scroll{-webkit-overflow-scrolling:touch}
  .kn-tira{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .kn-ir{width:100%}
  .kn-barra{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:center;justify-content:space-between;gap:.8rem;
    padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(8,13,39,.97);border-top:2px solid var(--rosa);
    backdrop-filter:blur(8px);
  }
  .kn-barra p{margin:0;font:700 .86rem/1.25 var(--display);color:var(--lima)}
  .kn-barra p small{display:block;font:500 .72rem var(--dato);color:var(--suave)}
  .kn-barra .kn-ir{width:auto;min-height:48px;padding:.5rem 1rem;font-size:.95rem;box-shadow:3px 3px 0 var(--menta);flex:none}
}
@media (max-width:520px){
  .kn-tope-fila{min-height:56px}
  .kn-sello{font-size:1.15rem;gap:.45rem}
  .kn-sello-logo{width:30px;height:30px}
  .kn-hero-arte{max-width:270px;margin-bottom:-40px}
  .nav-toggle{min-height:36px;padding:0 .75rem;font-size:.85rem;border-radius:8px}
  .kn-tira{display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,240px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.4rem;margin-inline:-1.1rem;padding-inline:1.1rem}
  .kn-tira figure{scroll-snap-align:start;min-width:0}
  .kn-tira figcaption{font-size:.85rem;line-height:1.4}
  .kn-barra p{font-size:.8rem}
  .kn-barra .kn-ir{padding:.45rem .85rem;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kn-ir{transition:none}
  .kn-ir::after{animation:none;display:none}
}