:root{
  --bg:#0e0f12;
  --card:#15171c;
  --muted:#9aa0a6;
  --text:#e8eaed;
  --primary:#6ee7b7;
  --accent:#8ab4f8;
  --radius:18px;
  color-scheme: dark light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{position:sticky;top:0;backdrop-filter:saturate(150%) blur(10px);background:rgba(14,15,18,.75);border-bottom:1px solid #23252b;z-index:10}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo {
  width: 100px;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
}
.brand .logo img {
  width: 100%;
  height: auto;
  display: block;
}

.brand span{font-weight:700;letter-spacing:.5px}
.nav a{color:var(--text);text-decoration:none;margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 90vh;
  padding: 140px 24px 100px;
  color: #fff;

  /* Imagen y efecto parallax */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
                    url("assets/banner-hero.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed; /* ← el truco parallax */
}

.hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.2;
  margin-bottom: 18px;
}

.hero p {
  color: #ddd;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 26px;
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}


.card{background:var(--card);border:1px solid #22252b;border-radius:var(--radius);padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.btn{padding:12px 16px;border-radius:12px;border:1px solid #2a2f36;background:#1c2027;color:var(--text);text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--primary));color:#0a0d14;border:0}
.btn:hover{transform:translateY(-1px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#101217;border:1px solid #21242b;border-radius:14px;padding:14px;text-align:center}
.stat b{font-size:22px}
.section{padding:36px 24px}
.section h2{font-size:24px;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(3,1fr)} .hero{grid-template-columns:1fr}}
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
    background-position: center center;
  }
}

@media (max-width:560px){ .grid{grid-template-columns:repeat(2,1fr)}}
.card.category{padding:0;overflow:hidden}
.category .img{aspect-ratio:4/3;background:#0d0f14;display:block;width:100%;object-fit:cover}
.category .body{padding:14px}
.category .body h3{margin:0 0 6px;font-size:16px}
.category .tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px solid #2b2f36;color:var(--muted);padding:4px 8px;border-radius:999px;font-size:12px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .gallery{grid-template-columns:repeat(2,1fr)} }
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #23262d}
.footer{padding:36px 24px;color:var(--muted);border-top:1px solid #23262d}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.kv div{background:#101217;border:1px dashed #2a2f36;border-radius:12px;padding:12px}
.small{font-size:13px;color:var(--muted)}
.brand .logo{width:70px;}