/* HERO.CSS */

.hero_stage {
  position: relative;
  display: block;
  border-radius: 28px;
  border: 1px solid var(--tlider_stroke);
  overflow: hidden;
  height: 420px;
  max-width: 420px;
  width: 100%; /* ← ocupa todo el ancho disponible */
}

.hero_video {
  display: block;
  width: 100%;  /* ← llena el contenedor */
  height: 420px;
  object-fit: cover;       /* ← ahora SÍ tiene algo que recortar */
  object-position: center; /* centrá o ajustá según el contenido del video */
}

/* HUD — sin cambios */
.hero_hud {
  position: absolute;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--tlider_stroke);
  background: var(--tlider_card);
  padding: 8px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
}
.hero_hud_tl { top: 16px; left: 16px; }
.hero_hud_tr { top: 16px; right: 16px; }
.hero_hud_bl { bottom: 16px; left: 16px; }
.hero_hud_br { bottom: 16px; right: 16px; }
.hero_online { color: var(--tlider_neon); }
.hero_accent  { color: var(--tlider_accent); }
.hero_sep     { opacity: .5; }

/* TEXT */
.hero_title {
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 900;
  line-height: .95;
}
.hero_text {
  opacity: .75;
  font-size: clamp(20px, 2vw, 20px);
}