:root{
  --bg:#0a0a0a;
  --text:#f2f2f2;
  --muted:#bdbdbd;
  --accent:#e5e5e5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* === FONDO === */
.bg-wrap{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;                /* antes estaba negativo; podía quedar debajo del body */
  background:#000;
}

.bg-video{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bg-video video{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.8) contrast(1.1);
}

/* Overlay para legibilidad */
.overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 700px at 70% 50%, transparent 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.65) 100%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));
}

/* === CONTENIDO === */
.container{
  position:relative;
  z-index:1;                 /* por encima del fondo */
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:32px;
}

.hero{max-width:70ch;padding:24px 16px}
.brand{font-size:clamp(28px,4vw,56px);margin:0 0 .25em}
.tagline{color:var(--muted);font-size:clamp(14px,2vw,18px);margin:0}

.nav{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:clamp(16px,2.2vw,22px);opacity:.9}
.nav a:hover{opacity:1}

/* Secciones demo */
html{scroll-behavior:smooth}
section{min-height:100vh;display:flex;align-items:center;padding:20px 32px;position:relative;z-index:1}
section .content{
  max-width:900px;margin:0 auto;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:28px 26px;
  box-shadow:0 8px 40px rgba(0,0,0,.35);
}
section h2{margin:0 0 .35em;font-size:clamp(26px,3.5vw,44px)}
section p{color:var(--muted);margin:0;line-height:1.7}



/* === Topbar minimal transparente === */
.topbar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -120%);
  width: min(960px, 92vw);
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: rgba(18, 18, 18, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);

  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  z-index: 9;
}
.topbar.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.topbar__brand {
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 14px;
  background: linear-gradient(180deg, #fff, #cfcfcf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 6px;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 20px);
}

.topbar__links a {
  position: relative;
  text-decoration: none;
  color: #f2f2f2;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 6px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}

.topbar__links a::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6px;
  height: 2px;
  background: rgba(255, 255, 255, .85);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.topbar__links a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.topbar__links a.active::after,
.topbar__links a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 560px) {
  .topbar {
    height: 44px;
    padding: 0 10px;
  }
  .topbar__brand {
    display: none;
  }
  .topbar__links a {
    font-size: 13px;
    padding: 8px 4px;
  }
}