/* Aparición inicial */
#wrapper{opacity:1}
body.is-preload #wrapper{opacity:0; transition:opacity .6s ease}
.fade-in{animation:fadeIn .6s ease forwards}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* Fondo general (mantiene tu overlay y bg) */
#wrapper{
  background-color:#212931;
  background-image: url("../../images/overlay.png"),
    linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
    url("../../images/bg.jpg");
  background-size:auto,auto,100% auto;
  background-position:center,center,top center;
  background-repeat:repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
}

/* Header pegajoso */
header#header{
  position:sticky; top:0; z-index:40;
  background:rgba(15,17,21,.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
#header .logo{
  display:inline-block; padding:.85rem 1rem;
  font-weight:800; letter-spacing:.4px;
}

/* Nav responsive */
#nav{
  position:sticky; top:52px; z-index:39;
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.25rem 1rem .6rem;
  border-bottom:1px solid var(--border);
  background:rgba(15,17,21,.6);
  backdrop-filter: blur(8px);
}

/* Burger */
#nav-toggle{display:none}
.nav-burger{display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:#1a2030; align-items:center; justify-content:center; cursor:pointer}
.nav-burger span{display:block; width:20px; height:2px; background:#cfd6e4; margin:3px 0; transition:transform .2s ease}
#nav .links, #nav .icons{display:flex; gap:.5rem}
#nav .links{flex-wrap:wrap; list-style:none; padding:0; margin:0}
#nav .links a{
  display:inline-block; padding:.5rem .75rem; border-radius:10px; color:var(--muted)
}
#nav .links a.active, #nav .links a:hover{color:var(--text); background:#1b2230}
#nav .icons{list-style:none; padding:0; margin:0}
#nav .icons a{
  display:grid; place-items:center; width:2.2rem; height:2.2rem;
  border-radius:12px; background:#1a2030; border:1px solid var(--border)
}
#nav .icons a:hover{background:#22283a}

/* Mobile nav (<= 880px) */
@media (max-width: 880px){
  .nav-burger{display:flex}
  #nav{flex-wrap:wrap; gap:.75rem}
  #nav .links{order:3; width:100%; display:none}
  #nav .icons{order:2}
  #nav-toggle:checked ~ .links{display:flex}
}

/* HERO */
.hero{
  width:min(1100px,92%); margin:1.2rem auto 2rem;
  display:grid; grid-template-columns: 1.3fr .9fr; gap:2rem; align-items:center;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:#b7c2d6; letter-spacing:.3px;
  background:#151b27; border:1px solid var(--border);
  padding:.28rem .6rem; border-radius:999px;
}
.hero__title{ font-size: clamp(2.2rem, 5.4vw, 3.3rem); font-weight:900; margin:.35rem 0 .4rem }
.hero__title span{background: linear-gradient(90deg, #9ea7ff, #6f56ff 60%, #4cc3ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__text{ color:var(--muted); max-width:60ch }
.hero__actions{margin-top:.9rem; display:flex; gap:.6rem; flex-wrap:wrap}
.hero__visual{justify-self:center}
.hero-photo{
  width: min(360px, 80vw);
  aspect-ratio: 1/1;
  border-radius: 24px;
  overflow: hidden;
  border:1px solid var(--border);
  background: radial-gradient(120% 80% at 20% 0%, rgba(124,92,255,.2), transparent 55%), #11161f;
  box-shadow: var(--shadow);
}
.hero-photo img{width:100%; height:100%; object-fit:cover}

/* Responsive hero */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .hero__actions{justify-content:center}
  .hero__visual{order:-1}
}

/* Main container */
#main{width:min(1100px,92%); margin: 1rem auto 2rem}

/* Footer */
#footer{width:min(1100px,92%); margin: 2rem auto 0}
#footer .split{
  display:grid; gap:1rem; grid-template-columns:1fr;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:1.25rem;
}
#footer h3{margin-bottom:.25rem}
#footer .icons{display:flex; gap:.5rem; list-style:none; padding:0; margin:0}
#footer .icons a{
  display:grid; place-items:center; width:2.2rem; height:2.2rem;
  border-radius:10px; background:#1a2030; border:1px solid var(--border)
}
#footer .icons a:hover{background:#22283a}

/* Copyright (sin bloque negro raro) */
#copyright{
  width:min(1100px,92%); margin: .9rem auto 1.2rem;
  background:transparent;
}
#copyright ul{
  list-style:none; padding:0; margin:.75rem 0 0;
  display:flex; gap:.75rem .9rem; flex-wrap:wrap; justify-content:center; color:var(--muted)
}

/* Responsive footer grid */
@media (min-width: 720px){
  #footer .split{ grid-template-columns: repeat(4, 1fr) }
}