/* KlipTok v38 · estilos de la navegación principal de 8 enlaces y de las páginas de sección.
   Aditivo: no toca ningún estilo anterior. */
.kt38-top { position: sticky; top: 0; z-index: 45; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(148,163,184,.28); }
.dark .kt38-top { background: rgba(15,23,42,.92); border-bottom-color: rgba(51,65,85,.6); }
.kt38-nav { display: flex; align-items: center; gap: .15rem; overflow-x: auto; padding: .35rem .6rem; scrollbar-width: none; }
.kt38-nav::-webkit-scrollbar { display: none; }
.kt38-link { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: .7rem; font-size: .82rem; font-weight: 600; color: #475569; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.kt38-link:hover { background: rgba(148,163,184,.16); color: #1e293b; }
.dark .kt38-link { color: #cbd5e1; }
.dark .kt38-link:hover { background: rgba(148,163,184,.18); color: #fff; }
.kt38-link.on { background: linear-gradient(90deg, #7c3aed22, #ec489922); color: #7c3aed; }
.dark .kt38-link.on { color: #c4b5fd; }
.kt38-ico { font-size: 1rem; line-height: 1; }
@media (max-width: 767px) { .kt38-top { display: none; } }   /* en móvil manda el menú lateral */

/* ---------- páginas de sección (juegos, clasificados, directorio, cupones, proyectos, novedades) ---------- */
.kt38-page { font-family: Inter, system-ui, sans-serif; color: #0f172a; background: #f8fafc; min-height: 100vh; }
.dark .kt38-page { color: #e2e8f0; background: #0b1220; }
.kt38-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(148,163,184,.28); background: rgba(255,255,255,.95); position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.dark .kt38-head { background: rgba(15,23,42,.95); border-bottom-color: rgba(51,65,85,.6); }
.kt38-logo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; text-decoration: none; color: inherit; }
.kt38-sp { flex: 1; }
.kt38-wrap { max-width: 1100px; margin: 0 auto; padding: 1.2rem .9rem 3rem; }
.kt38-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; }
.kt38-hero p { margin: 0 0 1rem; color: #64748b; }
.kt38-note { color: #64748b; font-size: .85rem; }
.kt38-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border-radius: .6rem; border: 1px solid transparent; background: linear-gradient(90deg, #7c3aed, #ec4899); color: #fff; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: none; }
.kt38-btn.alt { background: transparent; border-color: rgba(148,163,184,.5); color: inherit; }
.kt38-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.kt38-card { background: #fff; border: 1px solid rgba(148,163,184,.3); border-radius: .9rem; padding: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.dark .kt38-card { background: #111c33; border-color: rgba(51,65,85,.7); }
.kt38-card h3 { margin: 0; font-size: .98rem; font-weight: 700; }
.kt38-chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: rgba(124,58,237,.12); color: #7c3aed; font-size: .7rem; font-weight: 700; align-self: flex-start; }
.kt38-mut { color: #64748b; font-size: .78rem; }
.kt38-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.kt38-filters select, .kt38-filters input { padding: .45rem .6rem; border-radius: .6rem; border: 1px solid rgba(148,163,184,.5); background: transparent; color: inherit; font-size: .82rem; }
.kt38-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }
.kt38-cats button { padding: .3rem .6rem; border-radius: 999px; border: 1px solid rgba(148,163,184,.4); background: transparent; color: inherit; font-size: .76rem; cursor: pointer; }
.kt38-cats button.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.kt38-empty { padding: 2rem; text-align: center; color: #64748b; }
.kt38-banner { display: flex; gap: .8rem; align-items: center; background: linear-gradient(90deg, #7c3aed18, #ec489918); border: 1px solid rgba(124,58,237,.3); border-radius: 1rem; padding: .9rem 1rem; margin-bottom: 1.1rem; }
.kt38-banner .big { font-size: 2rem; }
.kt38-foot { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding: 1.2rem .9rem; border-top: 1px solid rgba(148,163,184,.3); margin-top: 2rem; max-width: 1100px; margin-left: auto; margin-right: auto; }
.kt38-foot a { color: #64748b; text-decoration: none; font-size: .8rem; font-weight: 600; }
.kt38-foot a:hover { color: #7c3aed; }
.kt38-foot-c { margin-left: auto; color: #94a3b8; font-size: .78rem; }