/* HERO HEADER */
.hero-header {
  position: relative;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
  padding-top: 80px;
}

/* Fondo semitransparente oscuro encima del humo */
.hero-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Efecto humo en movimiento */
.smoke {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 110%;
  background: url('foto humo/Black\ Elegant\ Clean\ Smoke\ Motivational\ Quote\ Video\ \(1\).gif') repeat-y;
  background-size: cover;
  opacity: 0.4; /* se puede ajustar según gusto */
  animation: moveSmoke 60s linear infinite;
  z-index: 0;
}

@keyframes moveSmoke {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Animación tipo serpiente para el logo */
.logo-animado {
  position: relative;
  z-index: 2;
  animation: snakeMove 6s ease-in-out infinite;
}

@keyframes snakeMove {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(10px) rotate(1deg); }
  50% { transform: translateX(0) rotate(0deg); }
  75% { transform: translateX(-10px) rotate(-1deg); }
}

/* Texto encima del humo */
.hero-header h1,
.hero-header p,
.hero-header .btn {
  position: relative;
  z-index: 2;
  text-shadow: 1px 1px 3px #000; /* Mejora legibilidad sobre humo */
}

/* Botones personalizados */
.hero-header .btn-primary {
  background-color: #0046FF;
  border: none;
}

.hero-header .btn-outline-light {
  border-color: #FFF200;
  color: #FFF200;
}

.hero-header .btn-outline-light:hover {
  background-color: #FFF200;
  color: #000;
}