/* ════════════════════════════════════════════════════════════
   passgen.css · TIGRE NINJA
   Página de presentación del proyecto passgen (HAKUSHIN).
   Depende de base.css (paleta, fuentes, reset) y main.css
   (header, footer, reveal, kj-watermark, rain) + main.js.
   Todas las clases van prefijadas con .pg- para no chocar.
   ════════════════════════════════════════════════════════════ */

/* ── Contenedor común ── */
.pg-wrap{max-width:1080px;margin:0 auto;padding:0 1.6rem;position:relative;z-index:1}
.pg-sec{padding:4.5rem 0}
.pg-sec + .pg-sec{border-top:1px solid var(--border)}

/* ════ HERO ════ */
.pg-hero{position:relative;padding:8.5rem 1.6rem 4rem;text-align:center;overflow:hidden}
.pg-hero .kj-watermark{font-size:clamp(240px,34vw,480px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(200,162,39,.05)}
.pg-crumb{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pdim);margin-bottom:1.4rem}
.pg-crumb a{color:var(--cyan);transition:color .2s}
.pg-crumb a:hover{color:var(--gold)}
.pg-eyebrow{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.2rem}
.pg-title{position:relative;z-index:2;font-family:var(--fm);font-weight:400;font-size:clamp(2.8rem,10vw,6rem);letter-spacing:-.02em;line-height:1;color:var(--parchment)}
.pg-title::before{content:'$ ';color:var(--gold);opacity:.55}
.pg-vers{display:inline-flex;gap:.5rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:1.4rem}
.pg-lead{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:clamp(1.05rem,2.4vw,1.4rem);color:rgba(237,230,214,.78);max-width:620px;margin:1.6rem auto 0;line-height:1.55}
.pg-lead b{color:var(--gold);font-weight:500}
.pg-cta-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.4rem}

/* Botones */
.pg-btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:.95rem 2rem;border-radius:6px;border:1px solid var(--gold);color:var(--gold);transition:background .2s,color .2s,transform .2s,box-shadow .25s}
.pg-btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.pg-btn.solid{background:var(--gold);color:var(--ink);box-shadow:0 0 34px rgba(200,162,39,.28)}
.pg-btn.solid:hover{background:var(--goldl);border-color:var(--goldl);box-shadow:0 0 52px rgba(200,162,39,.45)}
.pg-btn.ghost{border-color:var(--border-g);color:var(--pdim)}
.pg-btn.ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.pg-btn svg{width:16px;height:16px;fill:currentColor}

/* Chips de estado reutilizables */
.pg-chip{font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.32rem .8rem;border-radius:20px;border:1px solid var(--border);color:var(--pdim);white-space:nowrap}
.pg-chip.gold{color:var(--gold);border-color:rgba(200,162,39,.4);background:var(--goldd)}
.pg-chip.cyan{color:var(--cyan);border-color:rgba(0,207,224,.35);background:rgba(0,207,224,.07)}
.pg-chip.plain{color:var(--parchment);border-color:rgba(237,230,214,.22);background:rgba(237,230,214,.04)}

/* ════ TERMINAL / DEMO (elemento estrella) ════ */
.pg-term{max-width:820px;margin:3rem auto 0;position:relative;z-index:2;background:#05050b;border:1px solid var(--border-g);border-radius:12px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(200,162,39,.08)}
.pg-term-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:rgba(19,19,38,.9);border-bottom:1px solid var(--border)}
.pg-dot{width:9px;height:9px;border-radius:50%;flex:none}
.pg-dot.r{background:var(--red)}.pg-dot.g{background:var(--gold)}.pg-dot.c{background:var(--cyan)}
.pg-term-path{margin-left:.6rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;color:var(--pdim);text-transform:lowercase}
.pg-term-body{padding:1.6rem 1.4rem 1.8rem;text-align:left}

.pg-field{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--fm);font-size:.95rem}
.pg-prompt{color:var(--gold);flex:none}
.pg-seed{flex:1;min-width:180px;background:transparent;border:none;border-bottom:1px solid var(--border-g);padding:.35rem .2rem;font-family:var(--fm);font-size:1rem;color:var(--parchment);transition:border-color .2s}
.pg-seed:focus{border-color:var(--cyan)}
.pg-seed::placeholder{color:var(--dim)}

.pg-algos{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 .4rem}
.pg-algo{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .9rem;border:1px solid var(--border);border-radius:6px;color:var(--pdim);transition:color .2s,border-color .2s,background .2s}
.pg-algo:hover{color:var(--parchment);border-color:var(--border-g)}
.pg-algo[aria-pressed="true"]{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}
.pg-algo-desc{font-family:var(--fb);font-weight:300;font-size:.85rem;color:var(--pdim);min-height:1.4em;margin-bottom:1.2rem}

.pg-cmd{font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;color:var(--dim);margin-bottom:1rem;word-break:break-all}
.pg-cmd b{color:var(--pdim);font-weight:400}

.pg-out{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.2rem;border:1px dashed var(--border-g);border-radius:8px;background:rgba(200,162,39,.04)}
.pg-out-val{flex:1;min-width:160px;font-family:var(--fm);font-size:clamp(1.2rem,4vw,1.9rem);letter-spacing:.02em;color:var(--goldl);word-break:break-all;text-shadow:0 0 24px rgba(200,162,39,.35)}
.pg-out-val .car{color:var(--cyan);animation:pgBlink 1s steps(1) infinite}
@keyframes pgBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.pg-copy{font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .9rem;border:1px solid var(--border-g);border-radius:6px;color:var(--gold);transition:background .2s,color .2s}
.pg-copy:hover{background:var(--gold);color:var(--ink)}
.pg-note{font-family:var(--fb);font-weight:300;font-size:.8rem;color:var(--pdim);margin-top:1rem;display:flex;align-items:flex-start;gap:.5rem}
.pg-note .kj{font-family:var(--fj);color:var(--cyan);flex:none}

/* ════ TÍTULOS DE SECCIÓN ════ */
.pg-tag{font-family:var(--fm);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.pg-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.pg-h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:.03em;margin-bottom:1.2rem;color:var(--parchment)}
.pg-p{font-family:var(--fb);font-weight:300;font-size:1.02rem;color:rgba(237,230,214,.72);max-width:70ch;margin-bottom:1.1rem}

/* ── Datos rápidos ── */
.pg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2rem}
.pg-fact{padding:1.4rem 1.3rem;background:var(--ink2);border:1px solid var(--border);border-radius:10px}
.pg-fact dt{font-family:var(--fm);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pdim);margin-bottom:.5rem}
.pg-fact dd{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--gold)}

/* ── Algoritmos ── */
.pg-algo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:2rem}
.pg-card{position:relative;padding:1.9rem 1.7rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.pg-card:hover{transform:translateY(-5px);border-color:var(--border-g);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.pg-card::before{content:attr(data-kj);position:absolute;right:-.3rem;bottom:-2rem;font-family:var(--fj);font-weight:700;font-size:7.5rem;line-height:1;color:rgba(200,162,39,.05);pointer-events:none}
.pg-card-n{font-family:var(--fm);font-size:.58rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;margin-bottom:.7rem;position:relative;z-index:2}
.pg-card h3{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--parchment);margin-bottom:.7rem}
.pg-card p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:.92rem;color:var(--pdim);margin-bottom:1rem}
.pg-sample{position:relative;z-index:2;font-family:var(--fm);font-size:.8rem;color:var(--pdim);padding-top:.9rem;border-top:1px solid var(--border);display:block}
.pg-sample b{color:var(--goldl);font-weight:400}
.pg-card.best{border-color:var(--border-g)}
.pg-card.best .pg-card-n{color:var(--gold)}

/* ── Aviso honesto ── */
.pg-warn{margin-top:1rem;padding:2rem 2rem;border:1px solid rgba(224,57,80,.4);border-left:3px solid var(--red);border-radius:10px;background:rgba(224,57,80,.05)}
.pg-warn h3{font-family:var(--fd);font-weight:700;font-size:1.2rem;color:var(--red);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.pg-warn h3 .kj{font-family:var(--fj)}
.pg-warn p{font-family:var(--fb);font-weight:300;font-size:.98rem;color:rgba(237,230,214,.75);margin-bottom:.9rem;max-width:72ch}
.pg-warn p:last-child{margin-bottom:0}
.pg-warn b{color:var(--parchment);font-weight:500}
.pg-warn a{color:var(--cyan);border-bottom:1px solid rgba(0,207,224,.3);transition:color .2s}
.pg-warn a:hover{color:var(--gold);border-color:var(--gold)}

/* ── Bloques de código ── */
.pg-code{position:relative;margin:1.4rem 0;background:#05050b;border:1px solid var(--border);border-radius:10px;padding:1.2rem 1.3rem;overflow-x:auto}
.pg-code pre{font-family:var(--fm);font-size:.82rem;line-height:1.9;color:var(--parchment);white-space:pre}
.pg-code .c{color:var(--pdim)}
.pg-code .p{color:var(--gold)}
.pg-code-copy{position:absolute;top:.7rem;right:.7rem;font-family:var(--fm);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--border-g);border-radius:5px;color:var(--pdim);background:rgba(7,7,14,.8);transition:color .2s,border-color .2s}
.pg-code-copy:hover{color:var(--gold);border-color:var(--gold)}

/* ── Flags ── */
.pg-flags{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.88rem}
.pg-flags th{font-family:var(--fm);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pdim);text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--border-g)}
.pg-flags td{font-family:var(--fb);font-weight:300;color:rgba(237,230,214,.72);padding:.7rem .8rem;border-bottom:1px solid var(--border)}
.pg-flags td:first-child{font-family:var(--fm);color:var(--gold);white-space:nowrap}
.pg-flags td:last-child{font-family:var(--fm);color:var(--cyan)}

/* ── Cierre ── */
.pg-final{text-align:center;padding:5rem 1.6rem 6rem;position:relative;overflow:hidden}
.pg-final .kj-watermark{font-size:clamp(180px,26vw,340px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(0,207,224,.03)}
.pg-final h2{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:1rem}
.pg-final p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;color:var(--pdim);max-width:520px;margin:0 auto 2rem}
.pg-final .pg-cta-row{margin-top:0}
.pg-sig{position:relative;z-index:2;margin-top:2.6rem;font-family:var(--fm);font-size:.58rem;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}

/* ── Accesibilidad / responsive ── */
:where(a,button,input):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media (max-width:640px){
  .pg-hero{padding-top:7rem}
  .pg-sec{padding:3.2rem 0}
  .pg-term-body{padding:1.3rem 1rem 1.5rem}
  .pg-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Código en línea ── */
.pg-p code,.pg-warn code{font-family:var(--fm);font-size:.92em;color:var(--gold);background:rgba(200,162,39,.08);border:1px solid var(--border);border-radius:4px;padding:.06em .34em}