:root {
  --black: #0a0a0a; --deep: #111111; --surface: #161616; --border: #2a2a2a;
  --green: #2ecc8a; --green-dim: #1a7a52; --green-glow: rgba(46,204,138,0.15);
  --muted: #666; --muted-soft: #8f8b85; --text: #c8c0b8; --white: #f0ede8;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5.5rem; }
body { background:var(--black); color:var(--text); font-family:'Tenor Sans',sans-serif; overflow-x:hidden; cursor:none; }

.cursor { width:12px; height:12px; background:var(--green); border-radius:50%; position:fixed; top:-100px; left:-100px; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s; box-shadow:0 0 10px var(--green),0 0 20px rgba(46,204,138,.4); }
.cursor-ring { width:38px; height:38px; border:1.5px solid var(--green); border-radius:50%; position:fixed; top:-100px; left:-100px; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:.6; transition:transform .2s,opacity .2s; }

body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:100; opacity:.6; }

nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2.5rem; background:linear-gradient(to bottom,rgba(10,10,10,.95),transparent); }
.nav-logo { font-family:'Space Mono',monospace; font-size:.85rem; letter-spacing:.05em; color:var(--white); }
.nav-logo span { color:var(--green); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
.nav-links a:hover { color:var(--green); }

.hero { min-height:100svh; display:grid; place-items:center; position:relative; padding:6rem 2rem 4rem; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 60%,var(--green-glow),transparent 70%),radial-gradient(ellipse 80% 60% at 20% 20%,rgba(46,204,138,.05),transparent 50%); }
.hero-lines { position:absolute; inset:0; overflow:hidden; opacity:.15; }
.hero-lines::before { content:''; position:absolute; top:15%; left:-5%; width:110%; height:1px; background:linear-gradient(90deg,transparent,var(--green),transparent); transform:rotate(-8deg); }
.hero-lines::after { content:''; position:absolute; bottom:20%; left:-5%; width:110%; height:1px; background:linear-gradient(90deg,transparent,var(--green),transparent); transform:rotate(5deg); }

.hero-content { position:relative; text-align:center; max-width:800px; }
.hero-eyebrow { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); margin-bottom:2.5rem; opacity:0; animation:fadeUp .8s .3s ease both; }
.cat-avatar { width:120px; height:120px; margin:0 auto 2.5rem; position:relative; opacity:0; animation:fadeUp .8s .5s ease both; }
.cat-avatar img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 18px rgba(46,204,138,.35)); }
.cat-avatar::after { content:''; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); width:60px; height:8px; background:var(--green-glow); filter:blur(8px); border-radius:50%; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.8rem,8vw,6rem); font-weight:300; line-height:1.05; color:var(--white); margin-bottom:1.5rem; opacity:0; animation:fadeUp .8s .6s ease both; }
.hero-title em { font-style:italic; color:var(--green); }
.hero-intro { font-family:'Cormorant Garamond',serif; font-size:clamp(1.1rem,2.5vw,1.4rem); font-weight:300; line-height:1.75; color:var(--text); max-width:580px; margin:0 auto 3rem; opacity:0; animation:fadeUp .8s .8s ease both; }
.hero-intro strong { color:var(--white); font-weight:400; }
.cta-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .8s 1s ease both; }

.btn-primary { font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--black); background:var(--green); padding:.9rem 2rem; text-decoration:none; display:inline-block; transition:all .3s; position:relative; overflow:hidden; }
.btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.2); transition:left .3s; }
.btn-primary:hover::before { left:100%; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(46,204,138,.3); }
.btn-ghost { font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text); background:transparent; padding:.9rem 2rem; border:1px solid var(--border); text-decoration:none; display:inline-block; transition:all .3s; }
.btn-ghost:hover { border-color:var(--green); color:var(--green); }

.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:0; animation:fadeUp .8s 1.4s ease both; }
.hero-scroll span { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--green),transparent); animation:scrollPulse 2s ease-in-out infinite; }

.kinki-speaks { padding:6rem 2rem; max-width:900px; margin:0 auto; }
.section-tag { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); margin-bottom:3rem; display:flex; align-items:center; gap:1rem; }
.section-tag::after { content:''; flex:1; height:1px; background:var(--border); max-width:200px; }
.speech-bubble { background:var(--surface); border:1px solid var(--border); border-left:2px solid var(--green); padding:2.5rem; position:relative; margin-bottom:1.5rem; }
.speech-bubble p { font-family:'Cormorant Garamond',serif; font-size:clamp(1.15rem,2.5vw,1.5rem); font-weight:300; line-height:1.8; color:var(--white); font-style:italic; }
.speech-bubble .paw { position:absolute; top:1rem; right:1.5rem; font-size:1.2rem; opacity:.4; }
.kinki-sign { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.2em; color:var(--green); margin-top:.75rem; text-transform:uppercase; }

.divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }

.ecosystem { padding:6rem 2rem; background:var(--deep); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ecosystem-inner { max-width:1100px; margin:0 auto; }
.section-header { margin-bottom:4rem; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:300; color:var(--white); line-height:1.1; }
.section-title em { font-style:italic; color:var(--green); }
.section-sub { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--muted); margin-top:.75rem; font-style:italic; }

.apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.app-card { background:var(--black); padding:2rem; transition:background .3s; position:relative; overflow:hidden; text-decoration:none; display:block; }
.app-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.app-card:hover { background:var(--surface); }
.app-card:hover::before { transform:scaleX(1); }
.app-card.featured { background:var(--surface); border:1px solid var(--green-dim); }
.app-card.featured::before { transform:scaleX(1); }
.app-badge { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; padding:.25rem .6rem; margin-bottom:1.5rem; display:inline-block; }
.badge-featured { background:var(--green); color:var(--black); }
.badge-independent { background:transparent; border:1px solid var(--border); color:var(--muted); }
.badge-ecosystem { background:transparent; border:1px solid var(--green-dim); color:var(--green); opacity:.8; }
.app-icon { font-size:2rem; margin-bottom:1rem; }
.app-name { font-family:'Space Mono',monospace; font-size:.9rem; color:var(--white); margin-bottom:.5rem; }
.app-name span { color:var(--green); }
.app-desc { font-family:'Cormorant Garamond',serif; font-size:clamp(1.2rem,2.6vw,1.45rem); color:var(--muted-soft); line-height:1.42; font-style:italic; }
.app-url { font-family:'Space Mono',monospace; font-size:clamp(.68rem,1.6vw,.78rem); color:var(--green-dim); margin-top:1.5rem; letter-spacing:.1em; }

.web { position:relative; padding:6rem 2rem; border-top:1px solid var(--border); text-align:center; overflow:hidden; isolation:isolate; }
.web-parallax { position:absolute; left:-15%; top:-75%; width:130%; height:270%; z-index:0; background:url("fondo-puro.jpg") center center/cover no-repeat; will-change:transform; pointer-events:none; transform:translateZ(0); transform-origin:50% 40%; backface-visibility:hidden; }
.web-inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.web .section-tag { justify-content:center; margin-bottom:2rem; }
.web .section-tag::after { max-width:none; flex:0; width:0; display:none; }
.web-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:300; color:var(--white); margin-bottom:1rem; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.web-title em { color:var(--green); font-style:italic; }
.web-sub { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--white); font-style:italic; margin-bottom:3rem; line-height:1.7; text-shadow:0 1px 16px rgba(0,0,0,.5); }
.web-links { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.contact { position:relative; padding:6rem 2rem; background:var(--black); border-top:1px solid var(--border); text-align:center; overflow:hidden; }
.contact-inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.contact .section-tag { justify-content:center; margin-bottom:2rem; }
.contact .section-tag::after { display:none; }
.contact-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.2rem); font-weight:300; color:var(--white); margin-bottom:1rem; }
.contact-title em { color:var(--green); font-style:italic; }
.contact-sub { font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--muted-soft); font-style:italic; margin-bottom:2.25rem; line-height:1.65; }

.contact-honeypot { position:absolute; left:-10000px; height:0; width:0; opacity:0; pointer-events:none; }
.contact-form { position:relative; max-width:420px; margin:0 auto; text-align:left; }
.contact-field { margin-bottom:1.15rem; }
.contact-form label { display:block; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-soft); margin-bottom:.45rem; }
.contact-form input,.contact-form textarea { width:100%; font-family:'Tenor Sans',sans-serif; font-size:.95rem; color:var(--white); background:var(--black); border:1px solid var(--border); padding:.75rem 1rem; transition:border-color .25s,box-shadow .25s; }
.contact-form input:focus,.contact-form textarea:focus { outline:none; border-color:var(--green-dim); box-shadow:0 0 0 1px var(--green-glow); }
.contact-form textarea { resize:vertical; min-height:120px; line-height:1.5; }
.contact-submit { width:100%; margin-top:.35rem; border:none; cursor:pointer; font:inherit; }

footer { padding:2rem; border-top:1px solid var(--border); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:'Space Mono',monospace; font-size:.85rem; color:var(--muted); }
.footer-logo span { color:var(--green); }
.footer-copy { flex-basis:100%; margin-top:.75rem; font-family:'Space Mono',monospace; font-size:.8rem; color:#8f8b85; letter-spacing:.1em; text-align:center; }
.footer-links { display:flex; flex-wrap:wrap; row-gap:.35rem; column-gap:1.5rem; align-content:flex-start; }
.footer-links a { font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.15; color:var(--white); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; transition:color .25s ease; }
.footer-links a:hover { color:var(--green); }

@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes revealIn { to{opacity:1;transform:translateY(0)} }

.reveal { opacity:0; transform:translateY(24px); animation:revealIn .6s ease forwards; }
.reveal:nth-child(1){animation-delay:.05s} .reveal:nth-child(2){animation-delay:.12s}
.reveal:nth-child(3){animation-delay:.19s} .reveal:nth-child(4){animation-delay:.26s}
.reveal:nth-child(5){animation-delay:.33s} .reveal:nth-child(6){animation-delay:.40s}
.reveal:nth-child(7){animation-delay:.47s} .reveal:nth-child(8){animation-delay:.54s}
.reveal:nth-child(9){animation-delay:.61s}

@media (prefers-reduced-motion: reduce) {
  .web-parallax { top:0; height:100%; transform:none !important; }
}

@media(max-width:640px){
  html{scroll-padding-top:4.5rem}
  nav{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:200;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
    padding:.85rem 1rem;
    background:rgba(10,10,10,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .nav-logo{flex-shrink:0}
  .nav-links{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-items:center;
    gap:.4rem .55rem;
    width:auto;
    min-width:0;
    padding:0;
    border:0;
  }
  .nav-links a{font-size:.52rem;letter-spacing:.08em;color:var(--text);white-space:nowrap}
  .nav-links a:hover{color:var(--green)}
  .hero{padding:5rem 1.5rem 3rem} .cat-avatar{width:90px;height:90px}
  .kinki-speaks,.ecosystem,.web,.contact{padding:4rem 1.5rem}
  .speech-bubble{padding:1.75rem} body{cursor:auto}
  .cursor,.cursor-ring{display:none}
  .footer-inner{flex-direction:column;text-align:center}
}