/* ===== HERO SPLIT CON VIDEO — full viewport ===== */
#hero{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:600px;
  display:flex;
  overflow:hidden;
  background:var(--bg);
}

/* Columna izquierda: texto */
.hero-left{
  position:relative;
  z-index:3;
  width:50%;
  flex:0 0 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:100px clamp(32px,4vw,64px) 60px clamp(32px,5vw,80px);
  background:linear-gradient(90deg,var(--bg) 70%,transparent);
}

/* Columna derecha: video */
.hero-visual{
  position:absolute;
  top:0;right:0;
  width:58%;
  height:100%;
  z-index:1;
}
.robot-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.robot-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  display:block;
}
.robot-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(6,18,26,.7) 20%,transparent 55%);
}
.glow-screen{
  position:absolute;right:8%;top:20%;width:45%;height:40%;pointer-events:none;
  background:radial-gradient(circle,rgba(70,227,160,.14),transparent 70%);
  filter:blur(12px);animation:screenPulse 4s ease-in-out infinite;mix-blend-mode:screen;
}

/* hero-wrap es solo un wrapper invisible que no afecta el layout */
.hero-wrap{
  display:contents;
}

/* Estilos del texto */
.badge{
  display:inline-block;font-family:var(--mono);font-size:.78rem;color:var(--teal);
  border:1px solid var(--line);padding:7px 14px;border-radius:40px;margin-bottom:22px;
  background:rgba(58,209,197,.06);animation:fadeUp .8s both;align-self:flex-start;
}
.hero-title{
  font-size:clamp(2rem,4vw,3.8rem);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;animation:fadeUp .8s .1s both;
}
.hero-sub{
  color:var(--muted);font-size:clamp(.95rem,1.5vw,1.1rem);
  margin:18px 0 28px;max-width:480px;animation:fadeUp .8s .2s both;
}
.hero-sub strong{color:var(--ink)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .8s .3s both}
.hero-stats{
  display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;
  animation:fadeUp .8s .4s both;
}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:1.5rem;color:var(--teal);font-weight:800}
.hero-stats span{font-size:.78rem;color:var(--muted)}

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

.scroll-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;
}
.scroll-hint span{
  display:block;width:24px;height:38px;border:2px solid var(--muted);
  border-radius:14px;position:relative;
}
.scroll-hint span::after{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:4px;height:7px;background:var(--teal);border-radius:3px;
  animation:scrollD 1.6s infinite;
}
@keyframes scrollD{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:18px}}

/* Responsive */
@media(max-width:900px){
  #hero{
    height:auto;
    min-height:100vh;
    flex-direction:column;
  }
  .hero-left{
    width:100%;
    flex:none;
    padding:100px 24px 32px;
    background:var(--bg);
    z-index:3;
  }
  .hero-visual{
    position:relative;
    width:100%;
    height:60vw;
    min-height:260px;
    max-height:420px;
  }
  .robot-overlay{
    background:linear-gradient(0deg,var(--bg) 0%,transparent 30%);
  }
}
@media(prefers-reduced-motion:reduce){.glow-screen{animation:none}}