/* ════════════════════════════════════════════════════════════
   gato-virtual.css · TIGRE NINJA
   Página de presentación del proyecto Gato Virtual.
   Depende de base.css (paleta, fuentes, reset) y main.css
   (header, footer, reveal, kj-watermark, rain) + main.js.
   Todas las clases van prefijadas con .gv- para no chocar
   con el propio gato-virtual.js (que usa .gv-cont, .gv-sprite…
   internamente — aquí solo se AÑADEN reglas, nunca se pisan).
   Acento propio de esta página: --mint, tomado de la carátula.
   ════════════════════════════════════════════════════════════ */

:root{
  --mint:#4ee6a4; --mintd:rgba(78,230,164,.14);
}

.fpx{font-family:'Press Start 2P',var(--fm)}

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

/* ════ HERO ════ */
.gvp-hero{position:relative;padding:8.5rem 1.6rem 3rem;text-align:center;overflow:hidden}
.gvp-hero .kj-watermark{font-size:clamp(240px,34vw,480px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(78,230,164,.045)}
.gvp-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}
.gvp-crumb a{color:var(--cyan);transition:color .2s}
.gvp-crumb a:hover{color:var(--gold)}
.gvp-eyebrow{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);margin-bottom:1.2rem}
.gvp-title{position:relative;z-index:2;font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,9vw,5.6rem);letter-spacing:.04em;line-height:1.02;text-transform:uppercase}
.gvp-title .gv{color:var(--mint);text-shadow:0 0 30px rgba(78,230,164,.4)}
.gvp-paw{display:inline-block;position:relative;z-index:2;margin:1.1rem 0 .2rem;font-size:1.3rem;opacity:.85;letter-spacing:.6em}
.gvp-vers{display:inline-flex;gap:.5rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:.6rem}
.gvp-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:600px;margin:1.5rem auto 0;line-height:1.55}
.gvp-lead b{color:var(--mint);font-weight:500}
.gvp-cta-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}
.gvp-hint{position:relative;z-index:2;margin-top:2.4rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;color:var(--pdim);text-transform:uppercase}
.gvp-hint b{color:var(--mint)}
.gvp-hero-cover > img { margin-top: 3em; width: 60%; max-width: 900px; }

/* Botones */
.gvp-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;background:transparent}
.gvp-btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.gvp-btn.solid{background:var(--mint);border-color:var(--mint);color:#06140d;box-shadow:0 0 34px rgba(78,230,164,.28)}
.gvp-btn.solid:hover{background:#6ff0b8;border-color:#6ff0b8;box-shadow:0 0 52px rgba(78,230,164,.45);color:#06140d}
.gvp-btn.ghost{border-color:var(--border-g);color:var(--pdim)}
.gvp-btn.ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.gvp-btn svg{width:16px;height:16px;fill:currentColor}
.gvp-btn:disabled{opacity:.4;cursor:default;transform:none!important}

/* Chips */
.gvp-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}
.gvp-chip.mint{color:var(--mint);border-color:rgba(78,230,164,.4);background:var(--mintd)}
.gvp-chip.cyan{color:var(--cyan);border-color:rgba(0,207,224,.35);background:rgba(0,207,224,.07)}
.gvp-chip.gold{color:var(--gold);border-color:rgba(200,162,39,.4);background:var(--goldd)}
.gvp-chip.plain{color:var(--parchment);border-color:rgba(237,230,214,.22);background:rgba(237,230,214,.04)}

/* ════ SALA DE JUEGOS (elemento estrella: gato real + panel) ════ */
.gvp-room{max-width:820px;margin:2.6rem auto 0;position:relative;z-index:2;background:var(--ink2);border:1px solid var(--border-g);border-radius:14px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(78,230,164,.08)}
.gvp-room-bar{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;background:rgba(19,19,38,.9);border-bottom:1px solid var(--border)}
.gvp-dot{width:9px;height:9px;border-radius:50%;flex:none}
.gvp-dot.r{background:var(--red)}.gvp-dot.g{background:var(--gold)}.gvp-dot.m{background:var(--mint)}
.gvp-room-title{margin-left:.5rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;color:var(--pdim);text-transform:uppercase}
.gvp-room-body{padding:1.7rem 1.5rem 1.9rem}

.gvp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.5rem}
.gvp-stat{text-align:left}
.gvp-stat-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.gvp-stat-label{font-family:'Press Start 2P',var(--fm);font-size:.5rem;letter-spacing:.05em;color:var(--pdim);text-transform:uppercase}
.gvp-stat-val{font-family:var(--fm);font-size:.72rem;color:var(--parchment)}
.gvp-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--border)}
.gvp-bar-f{height:100%;border-radius:5px;transition:width .4s var(--ease);width:50%}
.gvp-bar-f.energia{background:linear-gradient(90deg,var(--cyan),#7ee8f2)}
.gvp-bar-f.hambre{background:linear-gradient(90deg,var(--red),#f28ba0)}
.gvp-bar-f.aburrimiento{background:linear-gradient(90deg,var(--gold),var(--goldl))}
.gvp-bar-f.felicidad{background:linear-gradient(90deg,var(--mint),#a3f6cf)}

.gvp-state-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px dashed var(--border)}
.gvp-state-lbl{font-family:'Press Start 2P',var(--fm);font-size:.52rem;color:var(--pdim);text-transform:uppercase}
.gvp-state-now{font-family:var(--fm);font-size:.85rem;color:var(--mint);padding:.3rem .7rem;border:1px solid rgba(78,230,164,.35);border-radius:20px;background:var(--mintd)}
.gvp-name{margin-left:auto;font-family:var(--fb);font-style:italic;color:var(--pdim);font-size:.85rem}
.gvp-name b{color:var(--parchment);font-style:normal}

.gvp-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.gvp-act{font-family:var(--fm);font-size:.66rem;letter-spacing:.08em;padding:.6rem 1rem;border:1px solid var(--border-g);border-radius:7px;color:var(--parchment);background:rgba(200,162,39,.04);transition:background .2s,border-color .2s,transform .15s;display:inline-flex;align-items:center;gap:.45rem}
.gvp-act:hover{border-color:var(--mint);background:var(--mintd);transform:translateY(-2px)}
.gvp-act:active{transform:translateY(0)}
.gvp-act.warn{border-color:rgba(224,57,80,.35)}
.gvp-act.warn:hover{border-color:var(--red);background:rgba(224,57,80,.08)}

.gvp-room-note{margin-top:1.3rem;font-family:var(--fb);font-weight:300;font-size:.82rem;color:var(--pdim);display:flex;align-items:flex-start;gap:.5rem}
.gvp-room-note .kj{font-family:var(--fj);color:var(--mint);flex:none}

/* ── El gato vive en TODA la página (position:fixed lo pone su propio script) ── */
.gv-cont{filter:drop-shadow(0 0 18px rgba(78,230,164,.18))}

/* ════ TÍTULOS DE SECCIÓN ════ */
.gvp-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}
.gvp-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.gvp-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)}
.gvp-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}
.gvp-p code,.gvp-license code,.gvp-flags code{font-family:var(--fm);font-size:.92em;color:var(--mint);background:var(--mintd);border:1px solid var(--border);border-radius:4px;padding:.06em .34em}

/* ── Galería de sprites (assets reales del proyecto) ── */
.gvp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;margin-top:2rem}
.gvp-sprite-card{padding:1.1rem .8rem 1rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;text-align:center;transition:transform .3s var(--ease),border-color .3s}
.gvp-sprite-card:hover{transform:translateY(-4px);border-color:var(--border-g)}
.gvp-sprite-card img{width:84px;height:84px;object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto .6rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.gvp-sprite-card span{font-family:'Press Start 2P',var(--fm);font-size:.5rem;letter-spacing:.03em;color:var(--pdim);text-transform:uppercase;line-height:1.6}

/* ── Rasgos / features ── */
.gvp-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2rem}
.gvp-feat{position:relative;padding:1.6rem 1.5rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.gvp-feat:hover{transform:translateY(-4px);border-color:var(--border-g)}
.gvp-feat::before{content:attr(data-kj);position:absolute;right:-.3rem;bottom:-1.8rem;font-family:var(--fj);font-weight:700;font-size:6.5rem;line-height:1;color:rgba(78,230,164,.05);pointer-events:none}
.gvp-feat h3{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--parchment);margin-bottom:.5rem}
.gvp-feat p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:.88rem;color:var(--pdim)}

/* ── Bloques de código ── */
.gvp-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}
.gvp-code pre{font-family:var(--fm);font-size:.82rem;line-height:1.9;color:var(--parchment);white-space:pre}
.gvp-code .c{color:var(--pdim)}
.gvp-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}
.gvp-code-copy:hover{color:var(--mint);border-color:var(--mint)}

/* ── Tabla de opciones ── */
.gvp-flags{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.86rem}
.gvp-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)}
.gvp-flags td{font-family:var(--fb);font-weight:300;color:rgba(237,230,214,.72);padding:.7rem .8rem;border-bottom:1px solid var(--border)}
.gvp-flags td:first-child{font-family:var(--fm);color:var(--mint);white-space:nowrap}

/* ── Licencia (aviso honesto, tono informativo no de alarma) ── */
.gvp-license{margin-top:1rem;padding:1.9rem 2rem;border:1px solid var(--border-g);border-left:3px solid var(--mint);border-radius:10px;background:rgba(78,230,164,.04)}
.gvp-license h3{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--parchment);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.gvp-license h3 .kj{font-family:var(--fj);color:var(--mint)}
.gvp-license p{font-family:var(--fb);font-weight:300;font-size:.96rem;color:rgba(237,230,214,.72);margin-bottom:.9rem;max-width:72ch}
.gvp-license p:last-child{margin-bottom:0}
.gvp-license b{color:var(--parchment);font-weight:500}
.gvp-lic-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.2rem 0}
.gvp-lic-item{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:8px;background:rgba(7,7,14,.4)}
.gvp-lic-item b{display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:.4rem}
.gvp-lic-item span{font-family:var(--fb);font-weight:300;font-size:.86rem;color:var(--pdim)}

/* ── Cierre ── */
.gvp-final{text-align:center;padding:5rem 1.6rem 6rem;position:relative;overflow:hidden}
.gvp-final .kj-watermark{font-size:clamp(180px,26vw,340px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(0,207,224,.03)}
.gvp-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}
.gvp-final p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;color:var(--pdim);max-width:520px;margin:0 auto 2rem}
.gvp-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(--mint);outline-offset:3px;border-radius:4px}
@media (max-width:640px){
  .gvp-hero{padding-top:7rem}
  .gvp-sec{padding:3.2rem 0}
  .gvp-room-body{padding:1.4rem 1.1rem 1.6rem}
  .gvp-btn{width:100%;justify-content:center}
  .gvp-name{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}