/* ════════════════════════════════════════════════════════════
   main.css · TIGRE NINJA
   Portada-índice (columna vertebral del sitio).
   Depende de base.css (paleta, fuentes, reset, atmósfera).
   Estructura: header · hero · editorial · pergaminos · sobre-mí · footer
   ════════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth}
body{min-height:100%;height:auto;overflow-x:hidden;line-height:1.6}

/* Marca de agua kanji reutilizable */
.kj-watermark{position:absolute;font-family:var(--fj);font-weight:700;color:rgba(200,162,39,.04);pointer-events:none;user-select:none;line-height:1;z-index:0}

/* ── Lluvia de kanji (fondo del hero) ── */
#rain{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}

/* ════ HEADER / NAV ════ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,3rem);background:rgba(7,7,14,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),transparent);opacity:.5}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--fd);font-weight:700;letter-spacing:.18em;font-size:.95rem;text-transform:uppercase;color:var(--parchment)}
.brand .brand-kj{font-family:var(--fj);font-size:1.4rem;color:var(--gold);text-shadow:0 0 18px rgba(200,162,39,.45);letter-spacing:0}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{font-family:var(--fm);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pdim);padding:.4rem .9rem;position:relative;transition:color .25s}
.nav a::after{content:'';position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .25s}
.nav a:hover{color:var(--parchment)}
.nav a:hover::after{transform:scaleX(1)}
.alias-chip{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;color:var(--cyan);border:1px solid rgba(0,207,224,.3);border-radius:20px;padding:.32rem .8rem;text-transform:uppercase;white-space:nowrap}
.nav-burger{display:none;width:38px;height:38px;border:1px solid var(--border-g);border-radius:6px;color:var(--gold);font-size:1rem}

/* ════ HERO ════ */
section#top.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 1.5rem 4rem;overflow:hidden}
section#top .hero-kj{font-size:clamp(280px,42vw,640px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(200,162,39,.045)}
section#top .hero-eyebrow{position:relative;z-index:2;font-family:var(--fm);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.6rem;display:flex;align-items:center;gap:.6rem}
section#top .hero-eyebrow::before,.hero-eyebrow::after{content:'';width:34px;height:1px;background:rgba(0,207,224,.4)}
section#top .hero-title{position:relative;z-index:2;font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,9vw,6.2rem);letter-spacing:.06em;line-height:1.02;text-transform:uppercase}
section#top .hero-title .kj{display:block;font-family:var(--fj);font-size:clamp(2rem,7vw,4.4rem);color:var(--gold);text-shadow:0 0 36px rgba(200,162,39,.4);margin-bottom:.4rem;letter-spacing:.1em}
section#top .hero-slogan{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.04em;color:rgba(237,230,214,.78);margin-top:1.4rem;max-width:680px}
section#top .hero-greet{position:relative;z-index:2;font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;color:var(--gold);margin-top:1.8rem;text-transform:uppercase;min-height:1em}
section#top .hero-cta{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.7rem;margin-top:2.4rem;font-family:var(--fm);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:.95rem 2.2rem;border:1px solid var(--gold);color:var(--gold);border-radius:6px;transition:background .2s,color .2s}
section#top .hero-cta:hover{background:var(--gold);color:var(--ink)}
section#top .hero-scroll{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--fm);font-size:.58rem;letter-spacing:.25em;color:var(--pdim);text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ════ EDITORIAL (presentación seria del proyecto) ════ */
.editorial{position:relative;max-width:780px;margin:0 auto;padding:6rem 1.6rem;z-index:1}
.editorial-kj{font-size:clamp(180px,26vw,360px);top:-2rem;right:-1rem;color:rgba(0,207,224,.03)}
.sec-tag{font-family:var(--fm);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.sec-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.editorial h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:.03em;line-height:1.15;margin-bottom:1.8rem;color:var(--parchment)}
.editorial p{font-family:var(--fb);font-weight:300;font-size:1.05rem;color:rgba(237,230,214,.72);margin-bottom:1.3rem}
.editorial p:first-of-type::first-letter{font-family:var(--fd);font-weight:900;font-size:3.6rem;float:left;line-height:.8;padding:.1em .14em 0 0;color:var(--gold)}
.editorial .pull{font-family:var(--fj);font-weight:300;font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--gold);text-align:center;margin:2.4rem 0;padding:1.6rem 0;border-top:1px solid var(--border-g);border-bottom:1px solid var(--border-g);letter-spacing:.08em}

/* ════ PERGAMINOS (índice) ════ */
.pergaminos{position:relative;max-width:1160px;margin:0 auto;padding:3rem 1.6rem 6rem;z-index:1}
.pergaminos-head{text-align:center;margin-bottom:3rem}
.pergaminos-head h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.04em;margin-bottom:.6rem}
.pergaminos-head p{font-family:var(--fb);font-weight:300;color:var(--pdim);font-size:1rem}
.perg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem}
.perg-card{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:2rem 1.8rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;min-height:230px}
.perg-card::before{content:attr(data-kj);position:absolute;right:-.4rem;bottom:-2.2rem;font-family:var(--fj);font-weight:700;font-size:8.5rem;line-height:1;color:rgba(200,162,39,.05);pointer-events:none;transition:color .35s,transform .35s}
.perg-card:hover{transform:translateY(-6px);border-color:var(--border-g);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(200,162,39,.12)}
.perg-card:hover::before{color:rgba(200,162,39,.12);transform:scale(1.06) rotate(-2deg)}
.perg-tag{align-self:flex-start;font-family:var(--fm);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;padding:.28rem .7rem;border-radius:20px;position:relative;z-index:2}
.perg-tag.own{color:var(--gold);border:1px solid rgba(200,162,39,.35);background:var(--goldd)}
.perg-tag.curated{color:var(--cyan);border:1px solid rgba(0,207,224,.3);background:rgba(0,207,224,.07)}
.perg-tag.culture{color:#c0a6ff;border:1px solid rgba(168,85,247,.35);background:rgba(168,85,247,.08)}
.perg-card h3{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:1.2rem;letter-spacing:.02em;color:var(--parchment)}
.perg-card p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:.92rem;color:var(--pdim);flex:1}
.perg-go{position:relative;z-index:2;font-family:var(--fm);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.5rem;transition:gap .25s}
.perg-card:hover .perg-go{gap:.9rem}
.perg-card.soon{opacity:.92}
.perg-card.soon .perg-go{color:var(--pdim)}

/* ════ SOBRE MÍ (créditos cómicos · la persona real) ════ */
.about{position:relative;max-width:820px;margin:0 auto;padding:5rem 1.6rem 4rem;text-align:center;z-index:1}
.about-kj{font-size:clamp(200px,28vw,400px);top:1rem;left:50%;transform:translateX(-50%);color:rgba(224,57,80,.035)}
.about .sec-tag{justify-content:center}
.about .sec-tag::after{content:'';width:28px;height:1px;background:var(--cyan)}
.about h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.2;margin-bottom:.6rem}
.about .quip{font-family:var(--fb);font-style:italic;color:var(--red);font-size:1.05rem;margin-bottom:1.6rem}
.about p{font-family:var(--fb);font-weight:300;color:rgba(237,230,214,.72);font-size:1.02rem;margin-bottom:1.2rem}
.about-roles{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin:1.4rem 0 2rem}

/* Enlace EXAGERADAMENTE resaltado (blanco) al perfil profesional */
.about-cta-white{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--fd);font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.05em;padding:1.1rem 2.6rem;background:#fff;color:#07070e;border-radius:8px;text-transform:uppercase;box-shadow:0 0 0 1px #fff,0 0 40px rgba(255,255,255,.45),0 0 90px rgba(255,255,255,.25);transition:transform .2s,box-shadow .25s;animation:whitepulse 2.8s ease-in-out infinite}
.about-cta-white:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px #fff,0 0 60px rgba(255,255,255,.7),0 0 130px rgba(255,255,255,.4)}
@keyframes whitepulse{0%,100%{box-shadow:0 0 0 1px #fff,0 0 40px rgba(255,255,255,.4),0 0 90px rgba(255,255,255,.2)}50%{box-shadow:0 0 0 1px #fff,0 0 64px rgba(255,255,255,.7),0 0 140px rgba(255,255,255,.4)}}

/* Redes sociales */
.socials{display:flex;justify-content:center;gap:1.1rem;margin-top:2.4rem}
.socials a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border-g);border-radius:50%;color:var(--pdim);transition:color .25s,border-color .25s,transform .2s,background .25s}
.socials a:hover{color:var(--gold);border-color:var(--gold);background:var(--goldd);transform:translateY(-3px)}
.socials svg{width:18px;height:18px;fill:currentColor}

/* Nota cómica del blog muerto */
.blog-note{margin-top:2.6rem;padding:1.3rem 1.6rem;border:1px dashed var(--border-g);border-radius:10px;background:rgba(19,19,38,.5);font-family:var(--fb);font-weight:300;font-size:.92rem;color:var(--pdim);max-width:600px;margin-left:auto;margin-right:auto}
.blog-note b{color:var(--red);font-weight:600}
.blog-note .kit{font-family:var(--fj);color:var(--gold)}

/* ════ FOOTER ════ */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:2.4rem 1.6rem;text-align:center;background:rgba(7,7,14,.6)}
.site-footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-bottom:1rem}
.site-footer .foot-links a{font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pdim);transition:color .25s}
.site-footer .foot-links a:hover{color:var(--gold)}
.site-footer .copy{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;color:var(--dim)}

/* ════ REVEAL al hacer scroll ════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}

/* ════ RESPONSIVE ════ */
@media (max-width:820px){
  .nav{position:fixed;top:60px;right:0;flex-direction:column;align-items:flex-start;gap:0;width:min(74vw,300px);height:calc(100vh - 60px);padding:1.4rem;background:rgba(7,7,14,.97);backdrop-filter:blur(14px);transform:translateX(100%);transition:transform .3s var(--ease);border-left:1px solid var(--border)}
  .nav.open{transform:none}
  .nav a{font-size:.8rem;padding:.9rem 0;width:100%;border-bottom:1px solid var(--border)}
  .nav .alias-chip{margin-top:1rem}
  .nav-burger{display:grid;place-items:center}
}