@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');

:root {
  /* ── Colores del logo ── */
  --amarillo: #FFD600;
  --amarillo-dim: #E6BE00;
  --amarillo-glow: rgba(255,214,0,0.18);
  --azul: #2196F3;
  --azul-dim: #1565C0;
  --azul-glow: rgba(33,150,243,0.15);
  --naranja: #FF8C00;
  --naranja-dim: #E07800;

  /* ── Fondos oscuros ── */
  --bg:  #0d0e10;
  --bg2: #111317;
  --bg3: #16181d;

  /* ── Texto ── */
  --text:  #f5f0d8;
  --text2: #b8a96a;
  --text3: #5a4f2a;

  /* ── Bordes ── */
  --border:  rgba(255,214,0,0.15);
  --border2: rgba(255,214,0,0.45);

  /* ── Fuentes ── */
  --mono:    'Share Tech Mono', monospace;
  --display: 'Orbitron', monospace;
  --body:    'Exo 2', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
  pointer-events:none;z-index:9999;
}

#particles-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--amarillo-dim);border-radius:3px}

/* ── HEADER ── */
header {
  position:sticky;top:0;z-index:100;
  height:66px;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(13,14,16,0.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}

/* ── LOGO ── */
.logo {
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:1.25rem;font-weight:900;
  color:var(--text);letter-spacing:3px;text-decoration:none;
}

.logo-img {
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
  border:2px solid var(--amarillo-dim);
  box-shadow:0 0 12px rgba(255,214,0,0.3);
  background:#fff;
  padding:2px;
}

.logo-text {
  color:var(--text);
  letter-spacing:3px;
}

.logo-text span {
  color:var(--amarillo);
  text-shadow:0 0 14px rgba(255,214,0,0.6);
}

/* ── NAV ── */
nav{display:flex;gap:2rem}
nav a {
  font-family:var(--mono);font-size:0.72rem;letter-spacing:2px;
  color:var(--text3);text-decoration:none;text-transform:uppercase;
  transition:color .2s,text-shadow .2s;
}
nav a:hover{color:var(--amarillo);text-shadow:0 0 8px rgba(255,214,0,0.5)}

.header-status{display:flex;align-items:center;gap:6px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--amarillo);box-shadow:0 0 8px var(--amarillo);animation:blink 1.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.status-text{font-family:var(--mono);font-size:0.7rem;color:var(--amarillo);letter-spacing:2px}

/* ── HERO ── */
.hero{position:relative;z-index:1;padding:90px 2rem 70px;text-align:center;overflow:hidden}

.hero-bg {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,214,0,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,214,0,0.03) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);
}

.hero-tag{font-family:var(--mono);font-size:0.72rem;color:var(--amarillo);letter-spacing:4px;text-transform:uppercase;margin-bottom:1.5rem;opacity:0.8}
.hero-tag::before{content:'> '}

.hero h1{font-family:var(--display);font-size:clamp(2.2rem,7vw,5rem);font-weight:900;line-height:1.05;margin-bottom:1rem;letter-spacing:4px}
.hero h1 .line1{display:block;color:var(--text)}
.hero h1 .line2{display:block;color:var(--amarillo);text-shadow:0 0 30px rgba(255,214,0,0.5),0 0 60px rgba(255,214,0,0.2)}

.hero-sub {
  font-family:var(--mono);font-size:1rem;color:var(--text2);
  margin-bottom:1rem;letter-spacing:2px;
}

.hero-desc{font-family:var(--mono);font-size:0.85rem;color:var(--text3);max-width:560px;margin:0 auto 3rem;line-height:1.9}

.hero-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.stat-num{font-family:var(--display);font-size:1.9rem;font-weight:900;color:var(--amarillo);text-shadow:0 0 12px rgba(255,214,0,0.4)}
.stat-label{font-family:var(--mono);font-size:0.65rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase}

/* ── TERMINAL BAR ── */
.terminal-bar{
  position:relative;z-index:1;
  margin:0 clamp(1rem,4vw,4rem) 2.5rem;
  background:rgba(0,0,0,0.7);
  border:1px solid var(--border);border-radius:6px;
  padding:10px 18px;
  font-family:var(--mono);font-size:0.82rem;
  display:flex;align-items:center;gap:8px;overflow:hidden;
}
.terminal-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amarillo);box-shadow:0 0 8px var(--amarillo)}
.term-prompt{color:var(--amarillo);white-space:nowrap}
.term-text{color:var(--text2);flex:1}
.term-cursor{color:var(--amarillo);animation:blink 1s step-end infinite}

/* ── FILTER ── */
.filter-section{position:relative;z-index:1;padding:0 clamp(1rem,4vw,4rem) 2rem;text-align:center}
.filter-tabs{display:inline-flex;gap:6px;background:rgba(0,0,0,0.5);border:1px solid var(--border);border-radius:8px;padding:6px}
.filter-btn{font-family:var(--mono);font-size:0.72rem;letter-spacing:2px;padding:8px 20px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text3);cursor:pointer;transition:all .2s;text-transform:uppercase}
.filter-btn:hover{color:var(--text2);border-color:var(--border)}
.filter-btn.active{background:var(--amarillo);color:#000;font-weight:700;border-color:var(--amarillo);box-shadow:0 0 15px rgba(255,214,0,0.4)}

/* ── OS GRID ── */
.os-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
  padding:0 clamp(1rem,4vw,4rem) 4rem;
}

/* ── CARD ── */
.os-card{
  position:relative;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  animation:fadeInUp .5s ease both;
}
.os-card:hover{transform:translateY(-6px);border-color:rgba(255,214,0,0.4);box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 25px rgba(255,214,0,0.07)}
.os-card.hidden{display:none}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Glows */
.card-glow{position:absolute;inset:0;background:radial-gradient(ellipse at top,var(--amarillo-glow),transparent 60%);pointer-events:none;opacity:0;transition:opacity .3s}
.os-card:hover .card-glow{opacity:1}
.card-glow.glow-red   {background:radial-gradient(ellipse at top,rgba(255,34,68,0.1),transparent 60%)}
.card-glow.glow-orange{background:radial-gradient(ellipse at top,rgba(255,140,0,0.12),transparent 60%)}
.card-glow.glow-green {background:radial-gradient(ellipse at top,rgba(0,200,80,0.1),transparent 60%)}
.card-glow.glow-blue  {background:radial-gradient(ellipse at top,rgba(33,150,243,0.12),transparent 60%)}
.card-glow.glow-cyan  {background:radial-gradient(ellipse at top,rgba(0,212,255,0.1),transparent 60%)}
.card-glow.glow-purple{background:radial-gradient(ellipse at top,rgba(155,48,255,0.12),transparent 60%)}
.card-glow.glow-yellow{background:radial-gradient(ellipse at top,rgba(255,214,0,0.12),transparent 60%)}

/* Badges */
.card-badge{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--mono);font-size:0.6rem;letter-spacing:2px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase}
.card-badge.windows{background:rgba(33,150,243,0.25);color:#64b5f6;border:1px solid rgba(33,150,243,0.5)}
.card-badge.linux  {background:rgba(255,214,0,0.15);color:var(--amarillo);border:1px solid rgba(255,214,0,0.35)}
.card-badge.kali   {background:rgba(255,34,68,0.2);color:#ff6685;border:1px solid rgba(255,34,68,0.4)}
.card-badge.mobile {background:rgba(0,212,255,0.15);color:#00d4ff;border:1px solid rgba(0,212,255,0.3)}
.card-badge.privacy{background:rgba(155,48,255,0.2);color:#c77dff;border:1px solid rgba(155,48,255,0.4)}
.card-badge.other  {background:rgba(255,140,0,0.2);color:var(--naranja);border:1px solid rgba(255,140,0,0.4)}

/* Imagen */
.card-img-wrap{position:relative;height:180px;overflow:hidden;background:#000}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .4s;filter:brightness(0.8) saturate(0.9)}
.os-card:hover .card-img-wrap img{transform:scale(1.05);filter:brightness(0.9) saturate(1.1)}
.card-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--bg3) 100%)}

/* Cuerpo */
.card-body   {padding:1.2rem 1.4rem 1.4rem}
.card-title  {font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:1px}
.card-version{font-family:var(--mono);font-size:0.7rem;color:var(--text3);margin-bottom:.8rem;letter-spacing:1px}
.card-desc   {font-size:0.82rem;color:var(--text2);line-height:1.6;margin-bottom:1rem}
.card-tags   {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.tag{font-family:var(--mono);font-size:0.6rem;padding:2px 8px;border:1px solid var(--border);border-radius:3px;color:var(--text3);letter-spacing:1px}

/* ── BOTONES ── */
.btn-download{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:0.78rem;letter-spacing:2px;font-weight:700;
  padding:10px 18px;border-radius:5px;text-decoration:none;
  background:transparent;color:var(--amarillo);border:1px solid var(--amarillo);
  transition:all .2s;text-transform:uppercase;
  position:relative;overflow:hidden;width:100%;
}
.btn-download::before{content:'';position:absolute;left:-100%;top:0;bottom:0;width:100%;background:var(--amarillo);transition:left .2s;z-index:-1}
.btn-download:hover{color:#000}
.btn-download:hover::before{left:0}

.btn-download.btn-blue  {color:var(--azul);border-color:var(--azul)}
.btn-download.btn-blue::before{background:var(--azul)}
.btn-download.btn-blue:hover{color:#fff}

.btn-download.btn-red   {color:#ff2244;border-color:#ff2244}
.btn-download.btn-red::before{background:#ff2244}
.btn-download.btn-red:hover{color:#fff}

.btn-download.btn-purple{color:#9b30ff;border-color:#9b30ff}
.btn-download.btn-purple::before{background:#9b30ff}
.btn-download.btn-purple:hover{color:#fff}

.btn-download.btn-yellow{color:var(--amarillo);border-color:var(--amarillo)}
.btn-download.btn-yellow::before{background:var(--amarillo)}
.btn-download.btn-yellow:hover{color:#000}

.btn-group{display:flex;gap:8px}
.btn-group .btn-download{flex:1}
.btn-key{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:1px;
  padding:10px 14px;border-radius:5px;text-decoration:none;
  background:rgba(255,140,0,0.1);color:var(--naranja);
  border:1px solid rgba(255,140,0,0.35);
  transition:all .2s;white-space:nowrap;display:flex;align-items:center;
}
.btn-key:hover{background:rgba(255,140,0,0.2);border-color:var(--naranja)}

/* ── ABOUT ── */
.about-section{position:relative;z-index:1;padding:4rem clamp(1rem,6vw,6rem);border-top:1px solid var(--border);background:linear-gradient(to bottom,transparent,rgba(255,214,0,0.02),transparent)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-terminal{background:#000;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.terminal-header{background:#111;padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}
.terminal-title{font-family:var(--mono);font-size:0.72rem;color:var(--text3);margin-left:auto;letter-spacing:1px}
.terminal-body{padding:1.2rem 1.4rem;font-family:var(--mono);font-size:0.8rem;line-height:2}
.t-green {color:#00c853}
.t-white {color:var(--text)}
.t-cyan  {color:#00d4ff}
.t-yellow{color:var(--amarillo)}
.t-blue  {color:var(--azul)}
.t-orange{color:var(--naranja)}
.cursor-blink{animation:blink 1s step-end infinite}

.about-text h2{font-family:var(--display);font-size:1.8rem;font-weight:900;margin-bottom:1.2rem;letter-spacing:2px}
.about-text h2 span{color:var(--amarillo);text-shadow:0 0 15px rgba(255,214,0,0.4)}
.about-text p{font-size:0.9rem;color:var(--text2);line-height:1.8;margin-bottom:1rem}
.about-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem}
.about-tags span{font-family:var(--mono);font-size:0.75rem;padding:6px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;color:var(--text2);letter-spacing:1px}

/* ── FOOTER ── */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:2.5rem 2rem;text-align:center;background:var(--bg2)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px}

.footer-logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:1rem;
  color:var(--text);letter-spacing:3px;
}

.footer-logo img{
  width:32px;height:32px;
  object-fit:contain;border-radius:6px;
  border:1px solid var(--amarillo-dim);
  background:#fff;padding:2px;
  box-shadow:0 0 8px rgba(255,214,0,0.25);
}

.footer-logo b{color:var(--amarillo)}

.footer-tagline{font-family:var(--mono);font-size:0.8rem;color:var(--text2);letter-spacing:2px}
.footer-note   {font-family:var(--mono);font-size:0.7rem;color:var(--text3);max-width:500px;line-height:1.6}
.footer-copy   {font-family:var(--mono);font-size:0.7rem;color:var(--text3)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{display:none}
  .os-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0 1rem 3rem}
  .about-inner{grid-template-columns:1fr}
  .hero{padding:60px 1rem 50px}
}
@media(max-width:480px){
  .hero h1{letter-spacing:2px}
  .hero-stats{gap:1.5rem}
  .filter-tabs{flex-wrap:wrap;justify-content:center}
}