/* ════════════════════════════════════════════════════════════
   templo.css · TIGRE NINJA · El Templo del Ki
   Hub motivacional: colecciones de enlaces (vídeos, anime, saga).
   Reutiliza base.css + main.css (header/footer/reveal/sec-tag) + main.js.
   ════════════════════════════════════════════════════════════ */

/* Intro: aviso de origen (propio vs externo) */
.ki-intro{max-width:760px;margin:0 auto;padding:1rem 1.6rem 0;text-align:center;position:relative;z-index:1}
.ki-intro p{font-family:var(--fb);font-weight:300;color:var(--pdim);font-size:.98rem;line-height:1.7}
.ki-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.origin{font-family:var(--fm);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;padding:.28rem .7rem;border-radius:20px}
.origin.own{color:var(--gold);border:1px solid rgba(200,162,39,.4);background:var(--goldd)}
.origin.ext{color:var(--cyan);border:1px solid rgba(0,207,224,.3);background:rgba(0,207,224,.07)}

/* Colección */
.ki-collection{max-width:1100px;margin:0 auto;padding:3.5rem 1.6rem 1rem;position:relative;z-index:1}
.ki-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.ki-head .ki-kj-big{font-family:var(--fj);font-weight:700;font-size:2rem;color:var(--gold);text-shadow:0 0 22px rgba(200,162,39,.35);line-height:1}
.ki-head h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.4rem,3.2vw,2rem);letter-spacing:.03em}
.ki-head .ki-sub{font-family:var(--fb);font-weight:300;color:var(--pdim);font-size:.9rem;flex-basis:100%}

.ki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem}

/* Tarjeta-enlace compacta */
.ki-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;background:var(--ink2);border:1px solid var(--border);border-radius:11px;transition:transform .25s var(--ease),border-color .25s,background .25s}
.ki-card:hover{transform:translateX(4px);border-color:var(--border-g);background:var(--ink3)}
.ki-kj{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;font-family:var(--fj);font-weight:700;font-size:1.5rem;color:var(--gold);background:var(--goldd);border:1px solid rgba(200,162,39,.2);border-radius:10px}
.ki-meta{flex:1;min-width:0}
.ki-meta h4{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:.01em;color:var(--parchment);margin-bottom:.18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-src{font-family:var(--fm);font-size:.58rem;letter-spacing:.1em;color:var(--pdim);text-transform:uppercase}
.ki-arrow{flex-shrink:0;font-family:var(--fm);color:var(--cyan);font-size:.9rem;transition:transform .25s}
.ki-card:hover .ki-arrow{transform:translate(2px,-2px)}

/* Variantes de acento por tipo */
.ki-card.video .ki-kj{color:var(--red);background:rgba(224,57,80,.09);border-color:rgba(224,57,80,.25)}
.ki-card.anime .ki-kj{color:#c0a6ff;background:rgba(168,85,247,.09);border-color:rgba(168,85,247,.25)}
.ki-card.force .ki-kj{color:var(--cyan);background:rgba(0,207,224,.08);border-color:rgba(0,207,224,.25)}

/* Bloque "propio · próximamente" */
.ki-own{max-width:1100px;margin:2.5rem auto 0;padding:1.8rem;border:1px dashed var(--border-g);border-radius:12px;background:rgba(19,19,38,.4);text-align:center;position:relative;z-index:1}
.ki-own h3{font-family:var(--fd);font-weight:700;font-size:1.15rem;margin-bottom:.5rem}
.ki-own p{font-family:var(--fb);font-weight:300;color:var(--pdim);font-size:.92rem;max-width:560px;margin:0 auto}
.ki-own .origin{margin-bottom:.9rem;display:inline-block}

.ki-spacer{height:3rem}